0

问题描述：

我有一个三行表。第一行包含一个下拉菜单。当用户选择下拉选项时，应在当前最后一行下方生成一个新行。如何调整此代码以使仅当用户选择当前最后一行的下拉选项而不是任何其他行时才生成新行？

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 回答