2

私はdeferred-updatesプラグインでknockoutjs 2.0を使用しています。次のように、リストをページ分割するように設計されたビューがあります。

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 を使用して小さなテスト ケースを作成しました。値を false に設定すると、リストが選択される前にコンソールに 2 行の出力が表示されます。値を true に設定すると、リスト要素は表示されません。

私は何を間違っていますか？

4

1 に答える 1

2

この線：

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

匿名の計算オブザーバブルを作成します (何にも割り当てられていないため)。割り当てられていないため、どこにも読み取られません。deferEvaluation が true の場合、内部関数 (populateList) は、何かが計算されたオブザーバブルを読み込もうとするまで実行されませんが、もちろん起こりません!

deferEvaluation を使用しない場合でも参照は破棄されますが、計算されたオブザーバブルを定義するとすぐに populateList が呼び出されます。この場合、ノックアウト依存関係の追跡は、匿名の計算されたオブザーバブルが「pageSize」などに依存していることを認識し、計算されたオブザーバブルが「行」変数を更新すること、つまり「行」が計算されたオブザーバブルに依存していることも認識します。これで十分に機能するようにセットアップされましたが、理想的ではありません。

私がそれを修正する方法は次のとおりだと思います：

まず、配列を返すように populateList 関数を変更します。

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

次に、計算された観測可能な行を呼び出します。

this.rows = ko.computed(populateList, null, {deferEvaluation: false});
于 2012-04-13T15:13:05.970 に答える