Incapace di legare i valori dopo aver inserito le righe della tabella con jQuery

Question

ho questo nel mio html:

<table class="dataTable" id="CADataTable"> 
<thead> 
    <tr> 
     <th> Type</th> 
     <th> Name</th> 
     <th> Adress</th> 
     <th> ID Number</th> 
     <th> Contact</th> 
     <th> Note</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td> 
      <select name="CAType" id="CAType" data-bind="value: CAType" style="width: 12em;">    
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
       <option>4</option>  
      </select> 
     </td>  
<!--   <td><input type="text" name="CAType" data-bind="value: CAType" style="width: 9em;"></td> --> 
     <td><input type="text" name="CAName" data-bind="value: CAName" style="width: 15em;"></td> 
     <td><input type="text" name="CAAdress" data-bind="value: CAAdress" style="width: 15em;"></td> 
     <td><input type="text" name="CAIdNum" data-bind="value: CAIdNum" style="width: 6em;"></td> 
     <td><input type="text" name="CAContact" data-bind="value: CAContact" style="width: 10em;"></td> 
     <td><input type="text" name="CANote" data-bind="value: CANote" style="width: 15em;"></td> 
    </tr> 
</tbody> 
</table> 
<button type="button" id="export" class="button" data-bind="click: newCreditRows">Add new row</button> 

e un codice jQuery all'interno di un ko js modello di vista, strega viene eseguito quando si preme il pulsante:

var clickAdd = 0; 
         newCreditRows = function(){ 
          clickAdd++; 
          if(clickAdd<=9){ 
           $('#CADataTable tr:last').after('<tr><td><select name="CAType' +clickAdd+ '" id="CAType' +clickAdd+ '" data-bind="value: CAType' +clickAdd+ '" style="width: 12em;"><option>Съдлъжник</option> <option>Поръчител</option> <option>3то Лице</option> <option>ипотекарни/заложни длъжници</option>  </select></td><td><input type="text" name="CAName' +clickAdd+ '" data-bind="value: CAName' +clickAdd+ 
            '" style="width: 15em;"></td><td><input type="text" name="CAAdress' +clickAdd+ '" data-bind="value: CAAdress' +clickAdd+ 
            ' " style="width: 15em;"></td><td><input type="text" name="CAIdNum' +clickAdd+ ' " data-bind="value: CAIdNum' +clickAdd+ 
            '" style="width: 6em;"></td><td><input type="text" name="CAContact' +clickAdd+ '" data-bind="value: CAContact' +clickAdd+ 
            ' "style="width: 10em;"></td><td><input type="text" name="CANote' +clickAdd+ '" data-bind="value: CANote' +clickAdd+ '" style="width: 15em;"></td></tr>');        
          }else 
           alert("Maximum number reached!"); 
          }; 

tutto sta funzionando bene, ma quello che ho notato è che le nuove righe aggiunte dal codice jQuery non possono associare il valore delle variabili ko.observable() (ho tutto dichiarato correttamente nel mio ViewModel, non sto postando perché il codice diventerà enorme.)

Voglio dire che la strega osservabile CAAdress1 è dichiarata così nel mio codice: '" data-bind="value: CAAdress' +clickAdd non funziona.

sono sicuro che mi manca qualcosa di veramente piccolo come char fuga, ma sono ancora troppo nuovo in jQuery e ad eliminazione diretta, quindi non sono in grado di individuare esso.

Answer 1

Si sta iniettando html nella dom dopo aver chiamato il metodo applyBindings. Quindi Ko non è a conoscenza dei nuovi elementi.

Date un'occhiata a this fiddle

var CA = function() { 
    this.CAName = null; 
    this.CAAdress= null; 
    this.CAIdNum = null; 
    this.CAContact = null; 
    this.CAName = null; 
    this.CANote= null; 
    this.CAType = null; 
}; 

var vm = { 
    newCreditRows : function() { 

     this.creditRows.push(new CA()); 
    }, 
    creditRows : ko.observableArray() 
}; 


ko.applyBindings(vm); 

spero che aiuta.