更新Knockoutjs表

Question

我有一个使用foreach绑定knockoutjs的表。

<table>
<thead>
    <tr>
        <th>ID</th>
        <th>BALANCE</th>
        <th>GENDER</th>
        <th>AGE</th>
    </tr>
</thead>
<tbody>
    <!-- ko foreach: data -->
    <tr>
        <!-- ko foreach: Object.keys($data) -->
        <td>
            <label data-bind="text: $parent[$data]" />
        </td>
        <!-- /ko -->
    </tr>
    <!-- /ko -->
</tbody>
</table>

表行迭代一个observableArray（大约2000个项目）。

在渲染表格之后，我需要编辑一行，但是表格不会使行更改。

如何在没有清除observableArray的情况下执行此操作并重新加载它？

此处JSFIDDLE

谢谢

Answer 1

您需要使data数组属性可观察，因此knockout会观察到更改。我建议你使用knockout mapping来为你创建observable，就像这样：

var foo = new MyVM();
var mapping = {
    create: function(options) {
        return ko.mapping.fromJS(options.data);
    }
};

ko.mapping.fromJS(myJS, mapping, foo.data);

但是你需要更改你的标记，这样它不会只是遍历对象属性，而是明确指定应该使用哪个属性：

<tbody>
    <!-- ko foreach: data -->
    <tr>            
        <td>
            <label data-bind="text: _id" />
        </td>
        <td>
            <label data-bind="text: balance" />
        </td>
        <td>
            <label data-bind="text: gender" />
        </td>
        <td>
            <label data-bind="text: age" />
        </td>            
    </tr>
    <!-- /ko -->
</tbody>

这是工作demo。当然，您可以自己创建可观察对象，然后只需重写代码，因此data数组中每个项目的每个属性都是可观察的。

修改

好吧，既然我们不知道实际的属性，我建议使用以下代码来制作可观察的内容：

var foo = new MyVM();
for (var i=0, n = myJSON.length; i < n; i++) {
    for (var prop in myJSON[i])
        if (myJSON[i].hasOwnProperty(prop))
            myJSON[i][prop] = ko.observable(myJSON[i][prop]);
}
foo.data(myJSON);

在你的视图模型函数中：

self.changeRow = function (){
    if(typeof self.data() != "undefined"){
        self.data()[0]["gender"]("male");
    }
};

查看更新的demo。