knockout.js - 使用knockoutjs推迟分页列表中的计算

Question

我正在使用 Knockoutjs 2.0 和 deferred-updates 插件。我有一个旨在对列表进行分页的 View ，如下所示:

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

在我的应用程序中，我创建了多个 View ，这些 View 对不同的对象列表进行分页。为了跟踪人们实际看到的项目，我想推迟分页的计算(在上面的 populateList() 函数中)，直到 View 实际准备好显示为止。

我认为我可以通过将 deferEvaluation 选项设置为 false，使用 deferred-updates 插件来实现此目的。但如果我这样做，我根本看不到任何输出。我建了一个小test case用jsfiddle来说明问题。将值设置为 false 时，控制台将在选择任何列表之前显示两行输出；将值设置为 true 时，不会显示任何列表元素。

我做错了什么？

Answer 1

行:

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

创建一个匿名计算的可观察量(因为它没有分配给任何东西)。由于它从未被分配，因此不会在任何地方被读取。当 deferEvaluation true 时，内部函数 (populateList) 不会运行，直到有东西尝试读取计算的可观察量，这当然不会发生!

如果您不使用 deferEvaluation，您仍然会丢弃引用，但是当您定义计算的可观察量时，populateList 将立即被调用。在这种情况下， knockout 依赖跟踪将意识到您的匿名计算可观察量取决于“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});