vincolo knockout su elementi generati dinamicamente

Question

Sto usando Knockout.js e sono abbastanza nuovo in questo. Ho creato un Example to my problem. Qui sto cercando di associare il binding ad eliminazione diretta agli elementi generati dinamicamente. Ma l'associazione non viene applicata correttamente agli elementi generati dinamicamente.

Sto provando a sincronizzare il campo di testo di input con l'elemento label. Quindi, qualunque cosa entriamo nel campo di input, lo stesso testo si rifletterà nel suo elemento etichetta corrispondente. Per favore perdonami se non sono chiaro con la mia domanda e per favore chiedimi l'autorizzazione. Aiutami ragazzi? Grazie.

Answer 1

Nel codice non si utilizza una delle funzionalità principali di knockout - generazione automatica di html. Invece di usare jQuery per aggiungere una nuova riga - usa la chiave ad eliminazione diretta foreach vincolante con observableArray. Quando aggiungi un nuovo elemento all'array knockout genererà automaticamente markup html.

Javascript:

function CourseViewModel(){ 
    var self = this; 
    self.textValue = ko.observable(''); 
} 

function CeremonyViewModel() { 
    var self = this; 

    self.cources = ko.observableArray([new CourseViewModel()]); 

    self.addCourse = function(){ 
     self.cources.push(new CourseViewModel()); 
    }; 
} 

ko.applyBindings(new CeremonyViewModel()); 

Html: violino

<div id="menutab"> 
    <form id="createMForm"> 
     <input type="button" id="createmenu" value="Add menu" data-bind="click: addCourse"/> 
     <div class="menu"> 
      <table data-bind="foreach: cources" class="ui-widget ui-widget-content" > 
       <tr> 
        <td> 
         <label for="CourseName">CourseName</label> 
        </td> 
        <td> 
         <input type="text" data-bind="value: textValue, valueUpdate:'keyup'" class="CreateCourseName" name="CourseName" /> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </form> 
</div> 
<div id="courseoptiontab"> 
    <form id="createCOForm"> 
     <div class="options"> 
      <table data-bind="foreach: cources" class="ui-widget ui-widget-content"> 
       <tr> 
        <td> 
         <label class="colabel">Course Name 
          <span class="forcourse" data-bind="text: textValue"></span> 
         </label> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </form> 
<div> 

Qui sta lavorando: http://jsfiddle.net/vyshniakov/g5vxr/