在編輯最後一行時自動向表中添加新行

當用戶開始在最後一行中輸入時，我試圖在表的末尾添加新行。視圖模型看起來像這樣的：在編輯最後一行時自動向表中添加新行

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

這裏是HTML：

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

我也tablerow的ko.dependentObservable功能插入alert()：

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

好像當tableRows數組包含2個元素時，此函數被觸發5次，數組中有3個元素時爲6次，等等。

我正在做這個對嗎？

來源

2011-08-29 shkipper

添加到每個行對象的dependentObservable在每次添加一行時觸發，因爲它們取決於tableRows。所以，每個人都在做一些工作來確定他們是否是最後一排。如果它是最後一行，則添加一個新行。

另一種方法是使用單個dependentObservable表示最後一行的值。然後，您可以訂閱對該dependentObservable的更改，檢查它是否有值，並在必要時添加一行。它看起來是這樣的：http://jsfiddle.net/rniemeyer/F5F8S/

而且，這裏是我從KO論壇，顯示了加入一個行並刪除最後一行，如果最後兩個是空的情況下，它可以幫助有一個樣本：http://jsfiddle.net/rniemeyer/MzGDr/

來源

2011-08-30 13:28:08

感謝jsfiddle鏈接。任何想法爲什麼http://jsfiddle.net/rniemeyer/F5F8S/與knockout-2.0.0一起使用，但與最新的knockout-2.1.0不兼容？ – MLH

2.1中有一個變更，它不允許計算的觀察值導致自己重新評估，包括對自身的訂閱。最簡單的解決方案是在setTimeout中添加行，以便它不在像下面這樣的執行上下文中：http://jsfiddle.net/rniemeyer/F5F8S/17/ –

非常棒！非常感謝答覆。 – MLH

在編輯最後一行時自動向表中添加新行

回答

相關問題