选定的项目无法使用KnockoutJS

Question

我是KnockoutJS的新手，我遇到了一些问题。

我不明白为什么selectedOf点击后没有更新。

有人可以发现我做错了什么吗？

<div> 
    <ul data-bind="foreach: Ofs"> 
     <li data-bind="text: Number, click: $root.selectOf" style="cursor:pointer"/> 
    </ul> 
    <strong>Item clicked: </strong><span data-bind="text: selectedOf.Number" /> 
</div> 

<script type"text/javascript"> 
    var OfsModel = function (initialData) { 
     //console.log(initialData); 
     var self = this; 
     self.CurrentState = ko.observable(initialData.CurrentState); 
     self.Ofs = ko.observableArray(initialData.Ofs); 
     self.selectedOf = ko.observable(); 

     self.selectOf = function (of) { 
      //console.log(of); 
      self.selectedOf(of); 
      //console.log(self.selectedOf()); 
     } 
    } 

    var initialData = '{"Ofs":[{"Client":"A","Number":"1","Qty":10,"QtyRejected":5,"StopReason":"","ModifiedOn":"\/Date(1345732172456)\/","IsHighlighter":false,"SequencesAvailable":[{"Id":1,"Name":"Seq1"},{"Id":2,"Name":"Seq2"},{"Id":3,"Name":"Seq3"}],"SelectedSequence":null},{"Client":"B","Number":"2","Qty":20,"QtyRejected":0,"StopReason":"too much work","ModifiedOn":"\/Date(1345732172457)\/","IsHighlighter":false,"SequencesAvailable":[{"Id":1,"Name":"Seq1"},{"Id":2,"Name":"Seq2"}],"SelectedSequence":null},{"Client":"C","Number":"3","Qty":30,"QtyRejected":0,"StopReason":"","ModifiedOn":"\/Date(1345732172457)\/","IsHighlighter":false,"SequencesAvailable":[{"Id":1,"Name":"Seq1"}],"SelectedSequence":null}],"CurrentState":""}'; 

    var vw = $.parseJSON(initialData); 
    ko.applyBindings(new OfsModel(vw)); 
</script> 

编辑： 我把http://jsfiddle.net/muek/KBeZ3/2/

Answer 1

代码当您访问Number物业断selectedOf，那么你需要调用它没有一个函数来获取对观察到的第一个值参数如selectedOf().Number。

但是，如果您在填充selectedOf之前执行此操作，则会尝试访问Number以导致未定义值出错。

一个很好的解决方法是使用类似with绑定的东西来为元素的子元素设置范围。它也可以防止空。这看起来像：

<div data-bind="with: selectedOf"> 
    <strong>Item clicked: </strong><span data-bind="text: Number" /> 
</div> 

这里有一个例子：http://jsfiddle.net/rniemeyer/ecDgD/

或者你可以创建一个计算观察到的Number值防止空或绑定像data-bind="text: selectedOf() ? selectedOf().Number : 'none'"