加入新行僅在最後一排，修改

我有三個行的表。第一行包含一個下拉菜單。當用戶選擇下拉選項時，應該在當前最後一行下方生成一個新行。我怎樣才能調整這段代碼，使得只有當用戶選擇當前最後一行的下拉選項而不是其他行時纔會生成一個新行？

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

但是這不起作用。任何想法的人？

來源

2013-03-23 Stranger

這不是你最後一個問題的重複嗎？ – 2013-03-23 21:13:45

當然，我想創建一個單獨的問題，因爲我意識到它偏離了我原來的問題。 – Stranger 2013-03-23 21:26:35

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-24 00:40:19 Joe

這是一個非常好的答案。我正在想馬特回答的方式。所以讓我來實現它，如果它不起作用，那麼我一定會用這個答案。 – Stranger 2013-03-24 02:39:46

Kinda錯過了首先使用像淘汰賽這樣的MVVM框架的觀點。 – 2013-03-25 12:50:23

@MattBurland，你絕對正確。陌生人，我會建議使用馬特的答案在我的。如果您要更改DOM，則必須更改此方法。 – Joe 2013-03-25 13:15:04

難道你不能只是通過導致事件觸發到你的處理程序並在那裏檢查它的行嗎？

事情是這樣的：

<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-24 00:33:18

你能幫我一下嗎？我已經實現了你的想法，但看起來仍然是錯誤的。這裏是小提琴：http://jsfiddle.net/JPVUk/15/ – Stranger 2013-03-24 02:40:55

試試這個：http://jsfiddle.net/JPVUk/16/ – 2013-03-24 04:14:00

加入新行僅在最後一排，修改

回答

相關問題