Question

我正在使用带有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构建了一个小test case来说明问题。将值设置为false，控制台将在选择任何列表之前显示两行输出;如果值设置为true，则不会显示任何列表元素。

我做错了什么？

Answer 1

该行：

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

创建一个匿名计算的observable（因为它没有分配给任何东西）。由于它从未被分配，因此无法在任何地方阅读。如果deferEvaluation为true，则内部函数（populateList）在尝试读取计算的observable之前不会运行，这当然不会发生！

如果你不使用deferEvaluation，你仍然会抛弃引用，但是当你定义计算的observable时会立即调用populateList。在这种情况下，淘汰依赖性跟踪将意识到您的匿名计算的observable依赖于'pageSize'之类的东西，它还将意识到计算的observable更新'rows'变量，即'rows'依赖于计算的observable。然后设置足够的工作，但它并不理想。

我认为我解决它的方式是：

首先，更改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});

使用knockoutjs推迟分页列表中的计算

1 个答案: