Question

我正在学习更多关于淘汰赛的问题，我遇到的问题是，当我将一个表格行推送到模板然后更新文本字段时，它会将所有输入更新为相同的值

视图模型：

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

HTML：

<input type="button" data-bind="click: $root.push, value: 'New Row'">
<table>
    <tbody data-bind="template: { name: 'table',foreach: loop }">
    </tbody>
</table>

<script type="text/html" id="table">
    <tr>
        <td><input type="text" data-bind="value: $root.value"></td>
        <td><input type="button" data-bind="click: $root.save, value: 'Save'"></td>
    </tr>
</script>

这是一个有效的例子 http://html5imageeditor.co.uk/kopush 如果你点击新行并添加内容，那么你会看到我的意思

Answer 1

这是因为所有字段都绑定到$ root.value，而$ root指的是视图模型的最高级别，在这种情况下，它总是引用viewmodel对象的实例。尝试绑定到模板中的$ data，这应该等同于循环数组中的每个值。

Answer 2

问题是所有输入值都绑定到一个observable。你应该这样做：

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属性。

See fiddle

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

2 个答案: