Knockout JS:动态添加和删除表格行

时间:2018-03-14 12:42:26

标签: javascript jquery knockout.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未捕获的ReferenceError:无法处理绑定&#34;点击:&gt; function(){return removeRow}&#34;   消息:未定义removeRow

当我再次点击添加行时,它会给我另一个控制台错误:

  

未捕获错误:您无法多次将绑定应用于同一元素。

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

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

这是我的jsfiddle:

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

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

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

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

请参阅BindingContext