नॉकआउट के साथ jQuery टेबललेटर - पंक्तियों को जोड़ना

Question

मैं सहेजने वाले विजेट के साथ टेबललेटर का उपयोग करने की कोशिश कर रहा हूं। तालिका knokout द्वारा आबादी है।

पहली बार तालिका आबादी के बाद, मुझे पंक्तियों की सही मात्रा मिलती है, और यह सॉर्टिंग याद करता है। मैं फिर AJAX का उपयोग करके डेटा के साथ तालिका को दोहराता हूं और नॉकआउट सरणी के लिए बाध्यकारी करता हूं। डेटा को तब दोगुना कर दिया जाता है, लेकिन नॉकआउट (सही ढंग से), केवल आधा डेटा ट्रैक करता है।

अब तक मैं इसे नीचे करने के लिए जब मैं लागू बचाया इस पद्धति में छँटाई पर नज़र रखी है:

self.tablesorter = function() { 
         $('table.tablesorterTranslation').trigger("update"); 
         setTimeout(function() { 
          var sl = $.tablesorter.storage($('table.tablesorterTranslation'), 'tablesorter-savesort'); 
          var sortList = (sl && sl.hasOwnProperty('sortList') && $.isArray(sl.sortList)) ? sl.sortList : ''; 
          if (sortList && sortList.length > 0) { 
           // update sort change 
           $('table.tablesorterTranslation').trigger("sorton", [sortList]); 
          } 
         }, 1000); 
         return false; 
        }; 

इस विधि नॉकआउट द्वारा कहा जाता है बंधन postaction।

विधि कहने से पहले, मेरे पास नॉकआउट सरणी में प्रत्येक आइटम के लिए एक टैबलेटर है, पोस्टबैक के बाद, मेरे पास दो हैं, एक नॉकआउट द्वारा ट्रैक किया गया है, और एक ऐसा जो टेबललेटर द्वारा जोड़ा जाता है।

क्या यह टेबललेटर कैशिंग मूल्यों के कारण है, और क्या इसे साफ़ करने का कोई तरीका है?

एचटीएमएल:

<table class="tablesorterTranslation" data-bind="visible: contents().length > 0"> 
       <colgroup> 
        <col class="referencenumber"/> 
        <col class="title"/> 
       </colgroup> 
       <thead> 
        <tr> 
         <th class="referencenumber">Ref number</th> 
         <th class="title">Title</th> 
        </tr> 
       </thead> 
       <tbody data-bind="foreach: contents, postAction: tablesorter(), visible: contents().length > 0"> 
        <tr> 
         <td class="referencenumber"> 
          <span data-bind="text: contentReferenceNumber"></span> 
         </td> 
         <td class="title"> 
          <a data-bind="attr: {href: previewUrl, title: previewTitle}, click: previewpopup" class="preview_translation"><%: AdminResources.Menu_Preview %></a> 
         </td> 
       </tr> 
      </tbody> 
     </table> 

ajax कि तालिका repopulates:

self.setContentList = function() { 
         if ($('#LanguageIdNameValuePairs option').length > 0) { 
          self.contents.removeAll(); 
          self.loading(true); 
          $.ajax('<%= Url.Action("GetContentList", "TranslateContentMenu") %>', 
           { 
            dataType: 'json', 
            data: { 
             languageId: $('#LanguageIdNameValuePairs').val(), 
             page: self.page 
            }, 
            success: function (allData) { 
             var mappedContent = $.map(allData, function (item) { return new ContentViewModel(item); }); 
             self.loading(false); 
             self.contents(mappedContent); 
            } 
           }); 
         } else { 
          self.contents(new Array()); 
         } 
        }; 

contentviewmodel:

(function (ko) { 
    PODIUM.translation.ContentViewModel = function(data) { 
     this.contentReferenceId = ko.observable(data.contentReferenceId); 
     this.contentName = data.contentName; 
     this.previewUrl = ko.observable(data.previewUrl); 
     this.previewTitle = ko.observable(data.previewTitle); 
     this.publishTitle = ko.observable(data.publishTitle); 
     this.contentReferenceNumber = ko.observable(data.contentReferenceNumber); 
    }; 
}(ko)); 

और पिछले, टेबल को आबाद करने और tablesort को परिभाषित करने savesort साथ, (savesort मुद्दा मुझे लगता है)।

 $('#OptionsMenu').change(function() { 
      viewModel.setContentList(); 
     }); 
     $('table.tablesorterTranslation').tablesorter({ 
      widgets: ["saveSort"], 
      widgetOptions: {} 
     }); 

मैं एक का चयन करें सूची है, कुछ मूल्यों के साथ, जब यह बदलता है, मैं सर्वर से नए मूल्यों हो और तालिका फिर से आबाद। यह वह जगह है जहां यह पुराने मूल्यों को याद करता है, लेकिन मैं तालिका को "साफ" करना चाहता हूं और शुरू करना चाहता हूं।

Answer 1

मुझे अपने आप को एक जवाब मिला, लेकिन मैं चाहता था कि नहीं।

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

मैंने टेबलर के सभी निशान को हटाकर शुरू किया (तालिका पर सीएसएस वर्ग को छोड़कर, क्योंकि मैं पहले से ही स्टाइलशीट में इसका उपयोग कर रहा था)।

तब मैं इस विधि कहा:

  self.sortContents = function (element, sortProperty) { 
       var elem = $(element); 
       var direction = (elem.hasClass('headerSortDown')) ? 'headerSortUp' : 'headerSortDown'; 
       var selector = $.trim($(element).attr('class').replace('header', '').replace('headerSortUp', '').replace('headerSortDown', '')); 
       if (direction == 'headerSortUp') { 
        self.filterStorage.updateSortFilter(selector, sortProperty); 
        self.contents.sort(function(left, right) { 
         return left[sortProperty] == right[sortProperty] ? 0 : (left[sortProperty] > right[sortProperty] ? -1 : 1); 
        }); 
        elem.removeClass('headerSortDown'); 
        elem.addClass('headerSortUp'); 
       } else { 
        self.filterStorage.updateSortFilter(selector, sortProperty); 
        self.contents.sort(function (left, right) { 
         return left[sortProperty] == right[sortProperty] ? 0 : (left[sortProperty] < right[sortProperty] ? -1 : 1); 
        }); 
        elem.removeClass('headerSortUp'); 
        elem.addClass('headerSortDown'); 
       } 
      }; 

सूचना im tablesort प्लगइन के रूप में एक ही सीएसएस वर्गों का उपयोग करना, इस वजह से tablesorter पहले से ही आवेदन में अन्य स्थानों में प्रयोग किया जाता है, और सीएसएस उन लोगों के लिए वहाँ पहले से ही है कक्षाएं।

मैं इस के लिए तालिका शीर्ष लेख बदल दिया है:

<th class="title header" data-bind="click: function(data, event){ return sortContents($(event.target), 'contentName')}"><%: AdminResources.ContentOverview_Title %></th> 

फिर, के बाद से मैं इस गंदगी में उठ गया, तरह राज्य को बचाने की कोशिश, मैं इस के लिए कुछ यह पता लगाने की थी। तो मैंने विधियों, अद्यतन, और प्राप्त करने के साथ एक नई कक्षा बनाई। यह सहेजता है कि कौन सा शीर्षलेख सॉर्ट कर रहा है, और दिशा।

function getSortFilter() { 
    var cookie = $.cookie(tableSortedByCookie); 
    return JSON.parse(cookie); 
} 
function updateSortFilter(selector, property) { 
    $.cookie(tableSortedByCookie, null); 
    $.cookie(tableSortedByCookie, JSON.stringify({ selector: selector, property: property }), { path: '/' }); 
} 

आप सॉर्टकंटेंट विधि में अद्यतन का उपयोग देख सकते हैं। (यह विधि तालिका वाले पेज के लिए व्यूमोडेल पर है)।

मैं तो ajax सफलता विधि की तह तक इस कहा:

var tableSortCookie = self.filterStorage.getSortFilter(); 
if (tableSortCookie != null && tableSortCookie.selector != null) { 
    var header = $('.tablesorterTranslation th.' + tableSortCookie.selector); 
    self.sortContents(header, tableSortCookie.property); 
} 

और फिर, मैं नॉकआउट बजाय का उपयोग कर, और साथ ही राज्य भंडारण और राज्य वापस जब लोड हो रहा है डेटा को सॉर्ट करने में सक्षम था डेटा बदलना, और पेज को रीफ्रेश करना।