Backbone:从另一个集合中获取集合

时间:2014-07-09 22:06:12

标签: javascript backbone.js pagination

我想要一个集合的分页视图。我尝试使用Backbone.Paginator,但我无法使其正常工作。

我想我自己会做分页,我认为拥有我的完整收藏品是个好主意,然后将视图发送给大型收藏品的一小部分,并且每当有人点击“下一个”时这样做”。

我尝试过这样做,但它不起作用:

var purchaseCollection = new purchaseItemCollection({url:endpoints.purchases});

purchaseCollection.fetch();

var purchaseRangeCollection = new Backbone.Collection(purchaseCollection.models),
    purchaseView = new purchaseItemCollectionView({collection:purchaseRangeCollection});

我的第二个系列只有一个型号,应该有几个。

我想知道这是否是最好的方法。

如何将集合拆分为集合,或如何以其他方式执行的任何建议都将非常感激!

3 个答案:

答案 0 :(得分:1)

您可以将完整集合的model定义为另一个独立集合。 然后在fetch()之后,您的收藏品将作为完整收藏集的model

var PurchaseCollection = Backbone.Collection.extend({
    model: Backbone.Collection
})

var purchaseCollection = new PurchaseCollection({url:endpoints.purchases});
purchaseCollection.fetch()

purchaseCollection.each(function (purchaseItem, index) {
    //the purchaseItem is what you want...
    //do anything...
});

如果你想要demo, click here

答案 1 :(得分:1)

您可以使用自定义对象来控制表示当前所选模型列表的集合。

例如,

var Slicer = function(opts) {
    opts || (opts = {});

    // your big collection
    this.collection = opts.collection || new Backbone.Collection();

    // a collection filled with the currently selected models
    this.sliced = new Backbone.Collection();
};

_.extend(Slicer.prototype, Backbone.Events, {
    // a method to slice the original collection and fill the container
    slice: function(begin, end) {
        var models = this.collection.models.slice(begin, end);
        this.sliced.reset(models);

        // triggers a custom event for convenience
        this.trigger('sliced', this.sliced);
    }
});

然后,您将创建此控制器的实例,并在此对象上或在sliced集合上的reset事件上收听自定义事件sliced以更新您的视图:< / p>

var controller = new Slicer({
    collection: purchaseCollection
});
controller.on('sliced', function(c) {
    console.log('sliced', c.pluck('id'));
});
controller.sliced.on('reset', function(c) {
    console.log('reset', c.pluck('id'));
});

使用http://jsfiddle.net/nikoshr/zjgkF/

进行演示

请注意,您还必须考虑fetch的异步性质,您无法立即处理模型。在此设置中,您可以执行类似

的操作
var purchaseCollection = new purchaseItemCollection(
    [], // you have to pass an array
    {url:endpoints.purchases} // and then your options
);
purchaseCollection.fetch().then(function() {
    // do what you want
    // for example
    controller.slice(0, 10);
});

答案 2 :(得分:0)

请记住,集合构造函数有两个属性(http://backbonejs.org/#Collection-constructor)。第一个是模型,第二个是url等选项。