動的に生成された要素のノックアウトバインド

Question

私はKnockout.jsを使用しています。私はこれでかなり新しいです。私はExample to my problem.を作成しました。ここでは、動的に生成された要素にノックアウトバインディングをバインドしようとしています。しかし、バインディングは動的に生成される要素に適切に適用されません。

入力テキストフィールドをラベル要素と同期しようとしています。したがって、入力フィールドに入力するものは、同じテキストが対応するラベル要素に反映されます。私の質問で私が明確でない場合は、私に許してください。みんな助けて？ありがとう。

Answer 1

あなたのコードでは、knockout - 自動生成のHTMLの主な機能の1つを使用していません。 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：http://jsfiddle.net/vyshniakov/g5vxr/

：

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

ここではフィドルに取り組んでいます