Knockout.js knockout js将不同的值推送到同一个可观察数组中

Knockout.js knockout js将不同的值推送到同一个可观察数组中,knockout.js,Knockout.js,我只是在学习更多关于knockout js的知识,我遇到了一个问题,当我将一个表行推送到一个模板,然后更新文本字段时,它会将所有输入更新为相同的值 视图模型: function viewModel() { var root = this; root.loop = ko.observableArray([]); root.table = ko.observableArray([]); root.value = ko.observable(''); root.

我只是在学习更多关于knockout js的知识,我遇到了一个问题,当我将一个表行推送到一个模板,然后更新文本字段时,它会将所有输入更新为相同的值

视图模型:

function viewModel() {
    var root = this;
    root.loop = ko.observableArray([]);
    root.table = ko.observableArray([]);
    root.value = ko.observable('');
    root.push = function() {
        root.loop.push('');
    }      
};
Html:

这是一个有效的例子
如果单击新行并添加内容,您将看到我的意思,这是因为所有字段都绑定到$root.value,$root表示视图模型的最高级别,在这种情况下,它总是指viewmodel对象的实例。尝试绑定到模板中的$data,这应该等于循环数组中的每个值。

问题是所有输入值都绑定到一个可观察值。 你应该这样做:

function viewModel() {
    var root = this;
    root.loop = ko.observableArray([]);
    root.table = ko.observableArray([]);
    root.push = function () {
        root.loop.push({text: ''});
    }
};
如您所见,每次单击“新建”按钮时,它都会创建并推送一个新项:{text:}。因此,每个项目都有自己的文本属性

您还需要更改视图:

<tr>
    <td><input type="text" data-bind="value: text"></input></td>
    <td><input type="button" data-bind="click: $root.save, value: 'Save'"></input></td>
</tr>
请注意,输入绑定不再绑定到$root.value,而是绑定到当前项的text属性


我有它的工作与保存按钮工作谢谢你不用担心,很高兴能帮助。
<tr>
    <td><input type="text" data-bind="value: text"></input></td>
    <td><input type="button" data-bind="click: $root.save, value: 'Save'"></input></td>
</tr>