ノックアウトのあるjQueryテーブルーダー - ローを追加する

Question

savesortウィジェットでtablesorterを使用しようとしています。表はknokoutによって読み込まれます。

テーブルが初めて入力されたとき、正しい行数が取得され、並べ替えが記憶されます。次に、ajaxを使用してノックアウト配列にバインドして、データを表に再作成します。データは2倍になりますが、ノックアウト（正しく）され、データの半分しかトラックされません。

私はこの方法でソート保存を適用するとこれまでのところ私はそれを追跡しています

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によって呼び出されます。

メソッドが呼び出される前に、私はノックアウト配列の各項目に対して、postactionの後に1つのtablerowを持っています.2つはノックアウトで追跡され、もう1つはtablesorterによって追加されたようです。

これはtablesorterのキャッシング値によるものですか？それをクリーニングする方法はありますか？

HTML：

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

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

と最後、savesortと、テーブルの移入とtablesortを定義（savesortは私が思う問題です）。

私は選択リストを持っています。この値が変更されると、サーバーから新しい値が取得され、テーブルが再作成されます。これは古い値を覚えているところですが、テーブルを "クリーン"にしてやり直したいと思います。

Answer 1

私は自分自身で答えを見つけましたが、私が望むものは見つかりませんでした。

基本的に私はノックアウトを使用しているため、ビュー自体に変更を加えず、むしろビューモデルを変更することになっています。だから、私は配列を並べ替えると、ノックアウトは、魔法の残りの部分をすることを見ていた。

私はtablesorterのすべての痕跡を削除することから始めました（テーブルのCSSクラスを除いて、これは既にスタイルシートでこれを使用していたので）。 tablesorterが既に出願の他の場所で使用されているためであり、CSSがそれらのためにそこに既にある、tablesortプラグインと同じCSSクラスを使用して

  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'); 
       } 
      }; 

注意イム：

は、私は、このメソッドを追加しましたクラス。私はこれにテーブルヘッダ変更

：次に

<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: '/' }); 
} 

sortcontentsメソッドのupdateの使い方を見ることができます。 （このメソッドは、テーブルを含むページのビューモデルにあります）。

Iは、次いで、AJAX成功方法の下にこれを追加し：次いで

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

および、私の代わりにノックアウトを使用してデータをソートすることができただけでなく、状態を保存し、バック時の状態をロードしますデータの変更、およびページのリフレッシュを行います。