javascript - 使用 Can.js 创建 Pagination 对象

Question

我正在创建一个分页可观察对象。我用一个集合实例化它，它有一个派生的分页列表，稍后我更新它的主列表(假设我已经过滤了数据)。显然我希望派生列表能够识别这一点并重新渲染 View ，但事实并非如此。有些东西一定不能被正确束缚。 Here's a fiddle.

var Pagination = can.Map.extend({

    pageNumber: 1,

    pageSize: 10,

    isFirstPage: can.compute(function() {
        return this.attr('pageNumber') === 1;
    }),

    isLastPage: can.compute(function() {
        return this.attr('pageNumber') === this.attr('lastPage');
    }),

    lastPage: can.compute(function() {
        return Math.ceil(this.attr('list').attr('length') / this.attr('pageSize'));
    }),

    paginatedList: can.compute(function() {
        var pgn = this.attr('pageNumber'),
            pgs = this.attr('pageSize'),
            start = (pgn-1) * pgs,
            end = start + pgs;
        return this.attr('list').slice(start, end);
    }),

    prevPage: function() {
        if (!this.attr('isFirstPage'))
            this.attr('pageNumber', this.pageNumber-1);
    },

    nextPage: function() {
        if (!this.attr('isLastPage'))
            this.attr('pageNumber', this.pageNumber+1);
    },

    toPage: function(pageNumber) {
        this.attr('pageNumber', pageNumber);
    }
});

var paginated = new Pagination({ list: collection });

...模板看起来像...

<table>
    {{#paginated.paginatedList}}
        <tr>
            ....
        </tr>
    {{/paginated.paginatedList}}
</table>

然后，过了一段时间，用户过滤了列表...

paginated.attr('list').replace(collection.filter(function() {
    // return filtered collection
}))

但是 View 不会重新渲染。什么是未绑定(bind)的？

Answer 1

首先，尝试解释一下我认为您的示例中发生的情况:

理解 can.compute 如何确定如何发布/发出它已更改的内容可能并不明显，但在您的示例中，计算 paginationList 会发出以下事实:当任何情况下它已更改属性 pageNumber、pageSize 或 list 发生变化时，您可以在使用 访问属性的计算中看到这一点。 attr() 访问器方法。

can.List 中的 replace 方法替换列表中的项目，而不是列表本身，因此在这个例子中，通过 .attr('list') 访问的属性实际上并没有改变(也没有改变)pageNumber 或 pageSize)，它仍然是列表的同一个实例，只是有不同的项目现在，计算值不会更新，从而不会更新模板。

作为对示例的简单/天真的修复，您可以替换:

paginated.attr('list').replace(collection.filter(function() {
    return Math.random() < 0.5;
}));

与

paginated.attr('list', collection.filter(function() {
    return Math.random() < 0.5;
}));

...即替换整个列表，而不仅仅是列表中的项目。

这是一个关于该更改的 fiddle http://jsfiddle.net/phx1jgq1/1/

当然，这可能不是您正在寻找的内容，也许您实际上想要绑定(bind)到项目可能会更改的列表。这里的问题是 this.attr('list').slice(start, end); 并没有真正绑定(bind)到列表中的所有单个项目，而是类似于:

this.attr('list').filter(function(item, index){
    return index >= start && index < end;
});

...确实如此，因此您只需替换该行即可使其按照您的预期工作。

这是一个有关该更改的 fiddle :http://jsfiddle.net/n2tygdud/1/

当然，如果过滤所有项目感觉不正确，您可能需要查看 define plugin 让您可以将高级和特定的行为映射到 can.Maps，例如 getter、setter 和类型转换，并使用它绑定(bind)到列表添加/删除事件并相应地更新计算属性。