基於動態生成的元素的敲除綁定

Question

我正在使用Knockout.js，我很新。我創建了一個Example to my problem.在這裏，我試圖將挖空綁定綁定到動態生成的元素。但綁定不適用於動態生成的元素。

我想同步輸入文本字段與標籤元素。因此，無論我們在輸入字段中輸入的是相同的文本都會反映在其相應的標籤元素中。請原諒我，如果我不清楚我的問題，請請我清除。幫幫我吧？謝謝。

Answer 1

在您的代碼中，您沒有使用knockout的一個主要功能 - 自動生成html。而不是使用jQuery添加新行 - 使用敲除foreach與observableArray綁定。當你添加新的項目陣列淘汰賽會自動生成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：

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