选择列表的Knockout值绑定间歇性地工作

Question

我有一个选择列表，它绑定到通过Web API调用的选项对象。对象如下。

[{“ID”：1，“状态”：“未分配”}，{“ID”：2，“状态”：“已分配”}，{“ID”：3，“状态”：“已检出“}，{” ID “：4”，状态 “：” QA1 “}，{” ID “：5”，状态 “：” QA2 “}，{” ID “：6中，” 状态 “：” QA3" } ，{ “ID”：7， “状态”： “QA4”}，{ “ID”：8中， “状态”： “QA5”}，{ “ID”：9 “状态”： “已失效”}，{ “ID”：10，“状态”：“已发送”}，{“ID”：11，“状态”：“准备审核”}，{“ID”：12，“状态”：“已审核”}，{ “ID”：13，“状态”：“准备打印”}，{“ID”：14，“状态”：“已修改”}，{“ID”：15，“状态”：“已存档”}] < / p>

选择列表定义为

<select id="statusName" name="statusName" data-bind="options:Status,optionsText:'ID',optionsValue:'ID','optionsCaption':'All Status...',value:selectedStatus"></select>

需要选择的状态来自查询字符串。我获取查询字符串值，填充selectedStatus observable，然后在我的document.ready中绑定视图模型，类似这样

 var deliveredTransVM = function () {

  var selectedStatus = ko.observable();

 //Get Status

 //Other functions

 return{

    selectedStatus:selectedStatus

     }

}();



$(function(){

 // get the id from the url
 var tId= getFromUrl('status');

 if (tId!=null && tId!='' && tId!='undefined')
 {
    deliveredTransVM.selectedStatus(tId); 
 }
   ko.applyBindings(deliveredTransVM);

 });

我不能创建一个小提琴因为我不能在那里放一个查询字符串。 Ť

问题是select会间歇性地设置值。有时它可以工作，而在其他时候selectedStatus是未定义的，如下图所示。我在绑定之前记录了observable并且总是填充它。我试过在ko.applyBindings之后设置它但得到同样的问题。

我在select中删除了optionsValue，但没有帮助。在ajax承诺解决后，ko.applyBidnings被解雇。任何解释都将不胜感激

Answer 1

嗯，代码有效......我怀疑代码中的其他内容会重新出现并踩到你的价值。

顺便说一下，你可以摆弄这个...只是嘲笑你的功能。

var statuses = [{"ID":1,"Status":"Unallocated"},{"ID":2,"Status":"Allocated"},{"ID":3,"Status":"Checked out"},{"ID":4,"Status":"QA1"},{"ID":5,"Status":"QA2"},{"ID":6,"Status":"QA3"},{"ID":7,"Status":"QA4"},{"ID":8,"Status":"QA5"},{"ID":9,"Status":"Invalidated"},{"ID":10,"Status":"Delivered"},{"ID":11,"Status":"Ready for Review"},{"ID":12,"Status":"Reviewed"},{"ID":13,"Status":"Ready To Print"},{"ID":14,"Status":"Edited"},{"ID":15,"Status":"Archived"}];

var deliveredTransVM = function () {
  var Status = ko.observableArray(statuses);
  var selectedStatus = ko.observable();

  return{

    selectedStatus:selectedStatus,
      Status:Status

     }

}();

function getFromUrl(x) {
    return 11;
}


$(function(){

 // get the id from the url
 var tId= getFromUrl('status');

 if (tId!=null && tId!='' && tId!='undefined')
 {
     console.log(tId);
    deliveredTransVM.selectedStatus(tId); 
 }
   ko.applyBindings(deliveredTransVM);

 });

http://jsfiddle.net/brettwgreen/ov1nqxux/