淘汰賽在表

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 here