마지막으로 편집 할 때 테이블에 새 행을 자동으로 추가합니다.

Question

사용자가 마지막 행에서 타이핑을 시작할 때 테이블 끝에 새 행을 추가하려고합니다. 나는 또한 tableRow ko.dependentObservable 기능에 alert()를 삽입 한

<table> 
    <thead> 
     <tr> 
      <th> 
       Number 
      </th> 
      <th> 
      </th> 
     </tr> 
    </thead> 
    <tbody data-bind="template:{name:'tableRow', foreach: tableRows}"> 
    </tbody> 
    <tfoot> 
     <tr> 
      <td colspan="4"> 
       <button type="button" data-bind="click: addNewRow"> 
        add row 
       </button> 
      </td> 
     </tr> 
    </tfoot> 
</table> 
<script id="tableRow" type="text/html"> 
    <tr> 
     <td> 
      <input type="text" style="width:40px;" data-bind="value: number, valueUpdate: 'keyup'" /> 
     </td> 
     <td> 
      <button type="button" data-bind="click: function(){ $data.remove(); }"> 
       delete 
      </button> 
     </td> 
    </tr> 
</script> 

:

ko.dependentObservable(function() { 
    alert('test'); 
    var curval = this.number();... 

그것은 것 같다 HTML 여기

function tableRow(number, ownerViewModel) { 
    this.number = ko.observable(number); 
    this.remove = function() { ownerViewModel.tableRows.destroy(this); } 

    ko.dependentObservable(function() { 
     var curval = this.number(); 
     var rows = ownerViewModel.tableRows(); 
     if (rows.length > 0) { 
      if (curval != '' && this == rows[rows.length - 1]) { 
       ownerViewModel.addNewRow(); 
      } 
     } 
    }, this); 
} 

function tableRowsViewModel() { 
    var that = this; 
    this.tableRows = ko.observableArray([]); 
    this.addNewRow = function() { 
     this.tableRows.push(new tableRow('', that)); 
    } 
    this.addNewRow(); 
} 

$(document).ready(function() { 
    ko.applyBindings(new tableRowsViewModel()); 
}); 

그리고 하나 같이 뷰 모델 본다 이 함수는 tableRows 배열에 2 개의 요소가 포함 된 경우 5 번, 배열에 3 개의 요소가있는 경우 6 번 발생합니다.

내가이 일을 제대로하고 있습니까?

Answer 1

행이 추가 될 때마다 각 행 객체에 추가 할 dependentObservable은 tableRows에 의존하기 때문에 실행됩니다. 그래서, 각자가 그들이 마지막 줄인지를 결정하기 위해 어떤 일을하고 있습니다. 마지막 행이면 새 행이 추가됩니다.

또 다른 방법은 마지막 행의 값을 나타내는 하나의 dependentObservable을 사용하는 것입니다. 그런 다음 해당 dependentObservable에 대한 변경 사항을 구독하고 값이 있는지 확인한 다음 필요할 때 행을 추가 할 수 있습니다. 그것은과 같이 보일 것이다 : 또한 http://jsfiddle.net/rniemeyer/F5F8S/

을, 여기에 내가 행을 추가하고 마지막 두가 비어있는 경우에 도움이된다면 또한 마지막 행을 제거 보여줍니다 KO 포럼에서 한 예입니다 http://jsfiddle.net/rniemeyer/MzGDr/