KnockoutJs - नकल पंक्तियाँ

Question

http://jsfiddle.net/nalberg/E3nBu/4/

इस के साथ किसी भी मदद के कारण? मुझे उपयोग करते समय डुप्लिकेट पंक्तियां मिल रही हैं: नॉकआउटजे: http://knockoutjs.com/ और jquery.tablesorter प्लगइन: (http://tablesorter.com/docs/)।

असल में, पहली बार सबकुछ लोड होता है ... यह बहुत अच्छा काम करता है। लेकिन अगर मैं टेबल को सॉर्ट करने के बाद नॉकआउट डेटा से जुड़े डेटा को प्रतिस्थापित या बदलता हूं ... मुझे डुप्लिकेट पंक्तियां मिलनी शुरू होती हैं। लगता है कि प्रत्येक अपनी पंक्ति सेट बना रहा है और बनाए रखता है।

Answer 1

मेरे पास आपके लिए समाधान है। हालांकि यह धीमा हो सकता है, लेकिन यह काम करता है। समाधान टेम्पलेट का उपयोग करना और jquery का उपयोग करना है। eachforeach के बजाय। एचटीएमएल में कोड यहां दिया गया है:

// replace this div with the table 
<div id="peopleTemplateContainer" data-bind="{template: 'peopleTemplate' }"> 

    <script id="peopleTemplate" type="text/html"> 
    <table id="dataGrid" border="1"> 
     <thead> 
     <tr> 
     <th><b>Sortable Header (sort click me)</b></th> 
     </tr> 
     </thead> 
     <tbody > 
      {{each(index,compliance) people()}} 
     <tr > 
      <td >${data}</td> 
     </tr> 
     {{/each}} 
     </tbody> 
    </table> 
    </script> 

Answer 2

मुझे लगता है कि दो समस्याएं हैं जो एक-दूसरे को जोड़ती हैं। सबसे पहले आपके पास एक अवलोकन योग्य सरणी है लेकिन सरणी के अंदर की चीजें ko.observable नहीं हैं, वे केवल नियमित जेएस ऑब्जेक्ट्स हैं। इसलिए यदि आप टेबल में आइटम मान बदलते हैं तो व्यूमोडेल अपडेट नहीं होता है। दूसरा, मुझे लगता है कि आपको टेबललेटर प्लगइन से गुजरना चाहिए और नॉकआउट में अवलोकन योग्य सूची को सॉर्ट करना चाहिए और बाइंडिंग आपके लिए काम करने दें। आप ko.observable arrays here को सॉर्ट करने के लिए जानकारी पा सकते हैं।

Answer 3

1. आप सरणी साफ कर सकते हैं तालिका से आबद्ध जैसे

   YourViewModel.list.clearAll(); 
   

2. साफ़ तालिका शरीर

   $(".gridtable").find('tbody').empty(); 
   

3. अद्यतन तालिका सॉर्टर

   $(".table_border").trigger("update"); 
   

तो अपने डेटा लोड समारोह इस

self.Load = function() { 
    self.list.removeAll(); 
    $(".gridtable").find('tbody').empty(); 
    $.ajax('/List', { 
     data: $('#yourformname').serializeArray(), 
     global: true, 
     contentType: "application/json; charset=utf-8", 
     type: "Get", contentType: "application/json", 
     success: function (result) { 
      var mappedList = $.map(result, function (item) { return new List(item) }); 
      self.List(mappedList); 

      $(".table_border").trigger("update"); 

     } 
    }); 
};