Нокаут динамически добавлять строки в таблице

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