敲除在表中动态添加一行

Question

问题描述：

我正在使用淘汰赛，我有一张桌子。在这个表中，我有 3 列。第一列有一个下拉列表。每当用户从下拉列表中选择一个值时，我都想生成一个新行。

这是我的小提琴：http : //jsfiddle.net/JPVUk/10/

<table class="table table-bordered">
<thead class="mbhead">
    <tr class="mbrow">
        <th>Type</th>
        <th>Comment</th>
        <th>Amount</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
           <select class="input-small">
           <option value="">Type</option>
           <option value="">One</option>
           <option value="">Two</option>
           <option value="">Three</option>
           </select>
        </td>
        <td><input class="input-small"/></td>
        <td><input class="input-small"/></td>
    </tr>

</tbody>
  </table>
 <button id="saveButton">save</button>`

我想使用淘汰赛来实现这一点。有没有办法使用淘汰赛来完成它？

Answer 1

如果我正确理解您的问题，您希望每次更改下拉列表中的选择时淘汰赛添加新行。

您可以通过使用包含项目的可观察数组创建视图模型来实现此目的。然后，只要选择更改，您就可以使用下拉列表将项目插入其中。请参阅以下内容：

var ViewModel = function() {
    var self = this;
    self.items = ko.observableArray([{comment:'first comment', amount:0}]);
    self.addNewItem = function(){
        self.items.push(new Item('',0));
    };
}

var Item = function(comment, amount) {
    var self = this;
    self.comment = ko.observable(comment);
    self.amount = ko.observable(amount);   
}; 

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

如果您随后将以下内容添加到您的表格标记中：

<tbody data-bind="foreach: items">
    <tr>
        <td>
           <select class="input-small" data-bind="event: { change: $root.addNewItem }">
               <option value="">Type</option>
               <option value="">One</option>
               <option value="">Two</option>
               <option value="">Three</option>
           </select>
        </td>
        <td><input class="input-small" data-bind="value: comment"/></td>
        <td><input class="input-small" data-bind="value: amount"/></td>
    </tr>
</tbody>

我在这里更新了你的 JsFiddle