수정

Question

문제 설명의 마지막 행 경우에만 새 행을 추가 :

내가 세 개의 행이있는 테이블이있다. 첫 번째 행에는 드롭 다운이 있습니다. 사용자가 드롭 다운 옵션을 선택하면 현재 행의 마지막 행 아래에 새 행이 생성되어야합니다. 사용자가 현재 행의 드롭 다운 옵션을 선택하고 다른 행을 선택하지 않은 경우에만 새 행이 생성되도록이 코드를 조정할 수 있습니까?

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

그러나 이것은 작동하지 않습니다. 어떤 아이디어가 있습니까?

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

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