为什么我的ko计算可观测不更新



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

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

要查看问题,请单击行上的"修改",编辑值,然后单击"保存"。您可以看到,对于相同的可观测值,现在有两个值。

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>

ko.observableArray只跟踪项目的添加和删除,不会跟踪其项目是否发生了更改。

形成文件:

关键点:observableArray跟踪数组中的对象,而不是那些对象的状态

因此,您需要对项目具有可观察的属性,以便跟踪其变化:

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

示范小提琴。

最新更新