동적으로 생성 된 요소의 녹아웃 바인딩

Question

Knockout.js를 사용하고 있는데 이것으로 꽤 새로워졌습니다. 나는 Example to my problem.을 만들었습니다. 여기서 녹아웃 바인딩을 동적으로 생성 된 요소에 바인딩하려고합니다. 그러나 바인딩은 동적으로 생성 된 요소에 제대로 적용되지 않습니다.

입력 텍스트 필드를 label 요소와 동기화하려고합니다. 따라서 우리가 입력 필드에 입력 한 것과 동일한 텍스트가 해당 레이블 요소에 반영됩니다. 제 질문에 명확하지 않으면 용서해주십시오. 도와 줘? 감사.

Answer 1

코드에서 knockout - 자동 생성 HTML의 주요 기능 중 하나를 사용하지 않습니다. jQuery을 사용하여 새 행을 추가하는 대신 바인딩을 사용하는 녹아웃 foreach을 사용하십시오. 배열 녹아웃에 새 항목을 추가하면 html 마크 업이 자동으로 생성됩니다.

자바 스크립트 :

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 :

여기

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

하는 노력 바이올린 : http://jsfiddle.net/vyshniakov/g5vxr/