0

問題の説明:

3行のテーブルがあります。最初の行にはドロップダウンが含まれています。ユーザーがドロップダウン オプションを選択すると、現在の最後の行の下に新しい行が生成されます。ユーザーが他の行ではなく、現在の最後の行のドロップダウン オプションを選択した場合にのみ新しい行が生成されるように、このコードを微調整するにはどうすればよいですか?

JSFiddle: http://jsfiddle.net/JPVUk/13/

 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);

私が苦労していること：

したがって、変更イベントを最後の行にバインドしたいので、次のようにアプローチしています。

 <select class="input-small" data-bind="items()[items.length-1] ? event: { change: $root.addNewItem }">

ただし、これは機能していません。アイデアはありますか？

4

2 に答える 2

2

イベントが発生する原因となった行をハンドラーに渡して、そこで確認することはできませんか?

このようなもの：

<select class="input-small" data-bind="event: { change: $root.addNewItem }">

その後：

self.addNewItem = function(row){
    if (row == self.items()[self.items().length - 1]) {
        self.items.push(new Item('',0));
    }
};
于 2013-03-24T00:33:18.190 に答える
1

http://jsfiddle.net/JPVUk/14/

jQuery が受け入れられるかどうかわからないので、これは単に DOM を使用します。基本的にノックアウトに渡されたイベントオブジェクトを使用します。少し dom をトラバースし、イベント ターゲットが親テーブルの最後の行の子であることを確認します。

    var tableRow = event.target.parentNode.parentNode,
        body = tableRow.parentNode,
        nodes = body.childNodes,
        children = [];
    for (var i = 0; i < nodes.length; i++) {
        // remove non-element node types. ie textNodes, etc.
        if (nodes[i].nodeType === 1) {
            children.push(nodes[i]);
        }
    }

    if (tableRow === children[children.length - 1]) {
        self.items.push(new Item('', 0));
    }
于 2013-03-24T00:40:19.893 に答える