3

問題の説明：

私はノックアウトを使用していて、テーブルを持っています。この表には、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>`

ノックアウトを使ってこれを達成したいと思います。ノックアウトを使用してそれを達成する方法はありますか？

4

1 に答える 1

5

私があなたの質問を正しく理解しているなら、あなたはあなたのドロップダウンの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を更新しました

于 2013-03-23T18:45:31.433 に答える