ràng buộc loại trực tiếp trên các yếu tố được tạo động

Question

Tôi đang sử dụng Knockout.js và tôi khá mới trong việc này. Tôi tạo ra một Example to my problem. Ở đây tôi đang cố gắng để ràng buộc các ràng buộc loại trực tiếp đến các yếu tố được tạo động. Nhưng ràng buộc không được áp dụng đúng cho các yếu tố được tạo động.

Tôi đang cố gắng đồng bộ hóa trường nhập văn bản với phần tử nhãn. Vì vậy, bất cứ điều gì chúng ta nhập vào trường đầu vào cùng một văn bản sẽ phản ánh trong phần tử nhãn tương ứng của nó. Xin vui lòng tha thứ cho tôi nếu tôi không rõ ràng với câu hỏi của tôi và xin vui lòng yêu cầu tôi cho giải phóng mặt bằng. Giúp tôi nhé? cảm ơn.

Answer 1

Trong mã của bạn, bạn không sử dụng một trong những tính năng chính của knockout - tự động tạo html. Thay vì sử dụng jQuery để thêm hàng mới - sử dụng loại trực tiếp foreach ràng buộc với observableArray. Khi bạn thêm mục mới vào mảng loại trực tiếp sẽ tự động tạo đánh dấu 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: fiddle

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

đây đang làm việc: http://jsfiddle.net/vyshniakov/g5vxr/