Wiązanie nokautu na dynamicznie generowanych elementach

Question

Używam Knockout.js i jestem całkiem nowy w tym. Stworzyłem Example to my problem. Tutaj próbuję powiązać wiązanie nokaut z dynamicznie generowanych elementów. Ale powiązanie nie jest właściwie stosowane do dynamicznie generowanych elementów.

Próbuję zsynchronizować pole tekstowe wejściowe z elementem etykiety. Zatem niezależnie od tego, co wprowadzimy w polu wejściowym, ten sam tekst odzwierciedli się w odpowiadającym mu elemencie etykiety. Proszę wybaczyć mi, jeśli nie jestem jednoznaczny z moim pytaniem i proszę mnie o zgodę. Pomóżcie mi? dzięki.

Answer 1

W kodzie nie używasz jednej z głównych funkcji knockout - automatycznego generowania html. Zamiast używać jQuery do dodawania nowego wiersza - użyj wiązania z foreach z observableArray. Po dodaniu nowego elementu do tablicy knockout automatycznie wygeneruje znaczniki 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: skrzypce

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

Tu pracuje: http://jsfiddle.net/vyshniakov/g5vxr/