javascript - 更新Knockoutjs表

我有一张用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
谢谢你

最佳答案

您需要使data数组属性可见，这样knockout就会观察到这些变化。我建议您使用knockout mapping来为您创建可观察的对象，例如：

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。

关于javascript - 更新Knockoutjs表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25521443/

KnockoutJS

javascript - 更新Knockoutjs表