javascript - 更新 Knockoutjs 表

Question

我有一个使用 foreach 绑定(bind)到 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为您完成创建可观察对象的工作，如下所示:

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 .当然，您可以自己制作 observable，然后只需重写代码，这样 data 数组中的每个项目的每个属性都将是一个 observable。

编辑:

好吧，由于我们不知道实际属性，我建议使用以下代码来制作可观察对象:

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);

在你的 View 模型函数中:

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

查看更新 demo .