Knockout JS：动态添加和删除表格行答案

【问题标题】：Knockout JS: Dynamically adding and removing table rowKnockout JS：动态添加和删除表格行
【发布时间】：2018-08-23 00:05:28
【问题描述】：

我这里用的是淘汰赛js。

我有一个 HTML 表格，表格有 4 列。我有按钮向表中添加一行，然后删除每一行的按钮以将其删除。 HTML 表格如下。

 <table class="table table-bordered">
        <thead class="mbhead">
            <tr class="mbrow">
                <th>Input</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: items">
            <tr>
                <td>
                    <select class="form-control common-input-text" data-bind="event: { change: $root.addNewItem }">                            
                        <option value="">One</option>
                        <option value="">Two</option>
                        <option value="">Three</option>
                    </select>
                </td>
                <td><span class="input-small" data-bind="value: firstName" /></td>
                <td><span class="input-small" data-bind="value: lastName" /></td>
                <td><span class="input-small" data-bind="value: address" /></td>                    
                <td>
                    <input type="button" value="Remove Row" data-bind="click: removeRow" class="btn btn-danger" />
                </td>
            </tr>
        </tbody>
    </table>
    <input type="button" value="Add Row" class="btn btn-primary" data-bind="click: addRow" />

我的淘汰赛为：

        (function () {
var ViewModel = function () {
    var self = this;

    //Empty Row
    self.items = ko.observableArray([]);


    self.addRow = function () {
        self.items.push(new Item());            
    };

    self.removeRow = function (data) {
        self.items.remove(data);
    };        
}

var Item = function (fname, lname, address) {
    var self = this;
    self.firstName = ko.observable(fname);
    self.lastName = ko.observable(lname);
    self.address = ko.observable(address);        
};

vm = new ViewModel()
ko.applyBindings(vm);

})();

当我单击添加行时，它会添加第一行但给我控制台错误：

knockout.js:73 Uncaught ReferenceError: Unable to process binding "click: >function (){return removeRow }" 消息：removeRow 未定义

当我再次单击添加行时，它给了我另一个控制台错误：

未捕获的错误：您不能将绑定多次应用于同一元素。

当我点击 removeRow 时没有任何反应。

当我注释掉 removeRow 的代码时，我可以添加一个新行。不知道我哪里错了。

这是我的 jsfiddle：

https://jsfiddle.net/aman1981/nz2dtud6/2/

【问题讨论】：

标签： javascript jquery knockout.js

【解决方案1】：

当使用数据绑定foreach 时，上下文会更改为其子项的上下文。访问父上下文需要添加$parent才能访问removeRow

<td>
    <input type="button" value="Remove Row" data-bind="click: $parent.removeRow" class="btn btn-danger" />
</td>

【讨论】：

谢谢这工作正常。但是有一个问题，我的选择和该行中的其他字段目前没有与之关联的 id。需要做什么，以便当我单击添加行时，新添加的行字段具有不同的 id，即所有选择具有不同的 id，文本框/标签（如果有的话）具有不同的 id。基本上我的最终目标是，一旦用户完成添加行，我想保存这些。所以我想循环并保存。
看看这个绑定：knockoutjs.com/documentation/options-binding.html 最后，您需要的关于您的项目的所有信息都应该存储在相应的 Item 对象中。我建议在保存时创建 ID，以确保它们在数据库中是唯一的。从存储中加载行时，如果再次保存，还返回 id 以确保更新正确的对象。
顺便说一句。因为我不确定，所以很清楚：保存时不需要触摸 dom 元素，而是使用存储在 viewModel 中的对象 lust。
谢谢，如果需要，我会调查并创建单独的帖子。
Paul，你能不能也看看我的帖子：stackoverflow.com/questions/49285406/…。如果你能提供一些意见

【解决方案2】：

由于您的<tbody> 使用foreach: items 绑定定义了一个新的范围，因此您需要使用$parent.removeRow 来引用该方法。

<input data-bind="click: $parent.removeRow" type="button" value="Remove Row" />

见BindingContext

【讨论】：

您能否为我的帖子提供意见：stackoverflow.com/questions/49285406/…