2012-04-12 3 views
2

knockoutjs 2.0をdeferred-updatesプラグインで使用しています。次のように私は、リストをページ分割するように設計されたビューを持っている:私のアプリケーションでknockoutjsを使用したページングリストの計算の延期

function PaginatedView(label, items, size) { 
    var self = this; 

    this.label = ko.observable(label); 

    // List of all items to display 
    this.list = ko.observableArray(items); 

    // List that contains the items on the current page 
    this.rows = ko.observableArray([]); 

    this.pageSize = ko.observable(size || 5); 
    this.pageIndex = ko.observable(0); 

    function populateList() { 
     var size = self.pageSize(); 
     var start = self.pageIndex() * size; 
     self.rows(self.list.slice(start, start + size)); 
     console.log(self.label() + ": Set rows to range", start, start + size - 1); 
    } 

    // if the deferEvaluation value is true, no items are ever displayed 
    ko.computed(populateList, null, {deferEvaluation: false});  

    this.maxPageIndex = ko.computed(function() { 
     return Math.ceil(this.list().length/this.pageSize()) - 1; 
    }, this); 

    this.pageList = ko.computed(function() { 
     var pages = []; 
     for (var p = 0; p <= self.maxPageIndex(); p++) 
      pages.push(p+1); 

     return pages; 
    }); 

    this.goToPage = function(p) { 
     p--; 
     if (p>=0 && p<=self.maxPageIndex()) 
      self.pageIndex(p); 
    } 
}; 

、私は、オブジェクトの異なるリストによるページ付け複数のビューを作成します。人々が実際に見るアイテムを追跡する目的で、ビューが実際に表示される準備が整うまでページ作成の計算を延期したいと考えています(上記のpopulateList()関数内)。

deferEvaluationオプションをfalseに設定することで、deferred-updatesプラグインでこれを実現できると思いました。しかし、もし私がそうすれば、私は何の出力も見ません。私は問題を説明するためにjsfiddleで小さなtest caseを構築しました。値をfalseに設定すると、リストが選択される前にコンソールに2行の出力が表示されます。値をtrueに設定すると、リスト要素は表示されません。

私は間違っていますか?

答えて

2

ライン:

ko.computed(populateList, null, {deferEvaluation: false});  

が作成する匿名の観察可能な計算された(それが何にも割り当てられていないとして)。割り当てられていないので、どこにも読み込まれません。 deferEvaluationをtrueにすると、内部関数(populateList)は、何かが計算されたobservableを読み込もうとするまで実行されません。

deferEvaluationを使用しない場合は、依然として参照を破棄していますが、計算されたobservableを定義するとすぐにpopulateListが呼び出されます。この場合、ノックアウト依存性トラッキングは、あなたの匿名計算された観測値が 'pageSize'のようなものに依存することを認識します。計算された観測値が 'rows'変数を更新することも認識します。十分に動作するように設定されていますが、理想的ではありません。

私はそれを修正したい方法があると思う:

this.rows = ko.computed(populateList, null, {deferEvaluation: false}); 
+0

function populateList() { var size = self.pageSize(); var start = self.pageIndex() * size; var result = self.list.slice(start, start + size); console.log(self.label() + ": Set rows to range", start, start + size - 1); return result; } 

が次に計算観察可能な行を呼び出す:

まず、配列を返すpopulateList機能を変更します私はそれをソートできる必要があるので、行を計算された変数にすることはできません。私は同じ項目を格納する 'ko.computed'と' ko.observableArray'という2つの変数を持つことができると思います。少し非効率ですが、私が必要とするかもしれません。 –

+0

''リスト 'とは独立して' 'rows''をソートする必要がありますか? (つまり、 'sort'を' list'に適用すれば、 'rows'はすでにソートされていますか?) – FredL

+0

はい、うまくいきます。 –

関連する問題