当可观察数组中的项目发生更改时,knockout不会更新dom

时间:2013-07-08 11:41:41

标签: knockout.js

我正在玩淘汰赛,并且遇到了一个可观察阵列的问题。

当我更改数组中的任何值时,它似乎没有更新dom。奇怪的是,如果我添加一个新元素,它反映在屏幕上,但如果我更改后仍然显示原始值的值

<div data-bind="text: ObvArray().length"></div>

<table>
    <tbody data-bind="foreach: ObvArray">
        <tr>
            <td><input data-bind="value: name"/></td>
        </tr>
    </tbody>
</table>

<button data-bind="click: addEl">Add Element</button>

<div data-bind="foreach: ObvArray">
    <div data-bind="text: name"></div>
</div>

function MyFirstVM(){
    this.ObvArray = ko.observableArray([
        {name: "Test 1"},
        {name: "Test 2"},
        {name: "Test 3"}
    ]);

    this.PrintTestProp = function(){
        return this.TestProp();
    }

    this.addEl = function(){
        this.ObvArray.push({name: "Another Test"})
    }
}

ko.applyBindings(new MyFirstVM());

继承我的小提琴。只需单击buttonm即可添加新元素。这工作正常,但如果我更改文本字段中的值,它不会反映在按钮

下方的dom中

http://jsfiddle.net/EUC27/

1 个答案:

答案 0 :(得分:1)

您还需要使数组的项目可观察

    this.ObvArray = ko.observableArray([
        {name: ko.observable("Test 1")},
        {name: ko.observable("Test 2")},
        {name: ko.observable("Test 3")}
    ]);