Dinamik olarak oluşturulmuş öğelerin üzerine ciltleme ciltleme

Question

Knockout.js kullanıyorum ve bu konuda oldukça yeniyim. Ben bir Example to my problem. oluşturdum Burada dinamik olarak üretilen elemanlara nakavt bağlama bağlamaya çalışıyorum. Ancak bağlanma, dinamik olarak oluşturulmuş öğelere uygun şekilde uygulanmaz.

Giriş metni alanını etiket öğesiyle eşitlemeye çalışıyorum. Yani giriş alanına girdiğimiz her şey aynı metin karşılık gelen etiket elemanında yansıtılacaktır. Sorumu açıklığa kavuşturmazsam lütfen beni affet ve lütfen bana izin ver. Bana yardım eder misiniz? Teşekkürler.

Answer 1

Kodunuzda, otomatik oluşturucu html olan knockout ana özelliklerinden birini kullanmıyorsunuz. numaralı bağlantıyla yeni satır içi ekleme eklemek için jQuery kullanmak yerine. Dizi nakavtuna yeni öğe eklediğinizde otomatik olarak html biçimlendirmesi oluşturulur.

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:

İşte

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

çalışıyor keman: http://jsfiddle.net/vyshniakov/g5vxr/