Question

问题描述：

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

 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 }">

然而这不起作用。有什么想法吗？

Answer 1

你不能只是通过导致事件触发你的处理程序并在那里检查它的行吗？

这样的事情：

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

Answer 2

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

我不确定jQuery是否可以接受，所以这只是使用DOM。基本上使用传递给knockout的事件对象。遍历一个小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));
    }

仅在修改后的最后一行添加新行

2 个答案: