Aggiungi automaticamente nuova riga alla tabella quando si modifica l'ultima

Question

Sto provando ad aggiungere una nuova riga alla fine della tabella quando l'utente inizia a digitare nell'ultima riga. il ViewModel assomiglia a questo:

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

E qui è 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> 

Ho anche inserito nella funzione alert() TableRow ko.dependentObservable:

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

Sembra questa funzione viene attivata 5 volte quando l'array tableRows contiene 2 elementi, 6 volte quando ci sono 3 elementi nella matrice e così via.

Sto facendo bene?

Answer 1

Il dipendente OOccessibile che si sta aggiungendo a ogni oggetto riga viene attivato ogni volta che viene aggiunta una riga, poiché dipendono da tableRows. Quindi, ognuno sta facendo del lavoro per determinare se sono l'ultima riga. Se è l'ultima riga, viene aggiunta una nuova riga.

Un'alternativa è utilizzare un singolo dipendenteObservabile che rappresenta il valore dell'ultima riga. Quindi, è possibile sottoscrivere le modifiche a tale dipendente dipendente, verificare se ha un valore e aggiungere una riga quando necessario. Sarebbe qualcosa di simile: http://jsfiddle.net/rniemeyer/F5F8S/

Inoltre, ecco un campione che ho avuto dal forum KO che mostra l'aggiunta di una riga e rimozione anche l'ultima riga se gli ultimi due sono vuoti in caso aiuta: http://jsfiddle.net/rniemeyer/MzGDr/