गतिशील रूप से जेनरेट किए गए तत्वों पर दस्तक बाध्यकारी

Question

मैं Knockout.js का उपयोग कर रहा हूं और मैं इसमें बहुत नया हूं। मैंने Example to my problem. बनाया है यहां मैं गतिशील रूप से जेनरेट किए गए तत्वों के लिए बाध्यकारी नॉकआउट को बांधने की कोशिश कर रहा हूं। लेकिन बाध्यकारी गतिशील रूप से जेनरेट किए गए तत्वों के लिए ठीक से लागू नहीं होते हैं।

मैं लेबल तत्व के साथ इनपुट टेक्स्ट फ़ील्ड को सिंक्रनाइज़ करने का प्रयास कर रहा हूं। तो जो भी हम इनपुट क्षेत्र में प्रवेश करते हैं, वही पाठ इसके संबंधित लेबल तत्व में प्रतिबिंबित होगा। कृपया मुझे माफ़ कर दो अगर मैं अपने प्रश्न से स्पष्ट नहीं हूं और कृपया मुझे मंजूरी के लिए पूछें। मुझे लोगों की मदद करो? धन्यवाद।

Answer 1

अपने कोड में आप knockout - ऑटो-जनरेटिंग एचटीएमएल की मुख्य विशेषता का उपयोग नहीं कर रहे हैं। नई पंक्ति जोड़ने के लिए jQuery का उपयोग करने के बजाय - observableArray के साथ बाध्यकारी नॉकआउट 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()); 

एचटीएमएल:

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