为什么我的 ko 计算的 observable 没有更新答案

【问题标题】：Why does my ko computed observable not update为什么我的 ko 计算的 observable 没有更新
【发布时间】：2012-11-24 06:55:51
【问题描述】：

我正在尝试在 foreach 中使用可见的敲除绑定和索引来实现逐行编辑。这是通过为每一行创建一个显示和修改 div 并使用可见绑定在它们之间进行选择来完成的。问题是 observable 不会在修改和显示 div 之间进行跟踪。

我创建了这个小提琴http://jsfiddle.net/rscidmore/YrsCj/57/

要查看问题，请单击一行上的修改，编辑值并单击保存。你可以看到你现在对同一个 observable 有两个值。

Javascript:
var myViewModel = {
    vals: ko.observableArray([
        {label: 'first',  item: 'one'},
        {label: 'second', item: 'two'},
        {label: 'third',  item: 'three'}
    ]),
    idx: ko.observable(-1)
};

ko.applyBindings(myViewModel);



HTML:
<body class='ui-widget'>
<div class='container'>
   <!-- ko foreach: vals -->
     <div class='label' data-bind="visible: $root.idx() == $index()">
       <span class='lbl' data-bind="text: label"></span>:
       <input type='text' data-bind="value: item">
       <input type='button' value="save" data-bind="click: function()
         { $root.idx(-1);}" />
     </div>
     <div class='label' data-bind="visible: $root.idx() != $index()">
       <span class='lbl' data-bind="text: label"></span>:
       <span data-bind="text: item"></span>
       <input type='button' value="modify" data-bind="click: function()
         { $root.idx($index());}" />
     </div>
   <!-- /ko -->
</div>
</body>

【问题讨论】：

标签： knockout.js visible observable

【解决方案1】：

ko.observableArray 仅跟踪项目的添加和删除，并且不会跟踪其项目是否已更改。

形成documenation：

关键点：一个 observableArray 跟踪数组中有哪些对象，不是那些对象的状态

因此，您需要在项目上添加observable properties 才能跟踪它们的更改：

vals: ko.observableArray([
        {label: 'first',  item: ko.observable('one')}, 
        {label: 'second', item: ko.observable('two')}, 
        {label: 'third',  item: ko.observable('three')}
    ]),

Demo fiddle.

【讨论】：