Nie można przypisać wartości po włożeniu wierszy tabeli z jQuery

Question

mam to w moim 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> 

i kod jquery wewnątrz nokaut js modelu widoku, czarownica jest wykonywane, gdy przycisk jest wciśnięty:

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!"); 
          }; 

Wszystko działa dobrze, ale zauważyłem, że nowe wiersze dodane przez kod jquery nie mogą powiązać wartości ze zmiennymi ko.observable() (Mam wszystko poprawnie zadeklarowane w moim widoku, nie publikuję tego ponieważ kod stanie się ogromny.)

Mam na myśli to, że obserwowalna czarownica CAAdress1 jest zadeklarowana w moim kodzie: '" data-bind="value: CAAdress' +clickAdd nie działa.

Jestem pewien, że brakuje mi czegoś naprawdę małego, jak ucieczka z char, ale wciąż jestem zbyt nowy w jquery i nokautach, więc nie jestem w stanie tego zauważyć.

Answer 1

Wstrzykujesz html do domingu po wywołaniu metody applyBindings. So Ko nie zna nowych elementów.

Spójrz na 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); 

Mam nadzieję, że to pomaga.