在每次分页获取后将数据附加到同一集合

时间:2012-12-06 22:10:41

标签: backbone.js

我正在尝试使用骨干填充instagram图像,

我基本上有3个模型如下,

用户模型存储与Instagram相关的所有用户信息

App.Models.User = Backbone.Model.extend({
    defaults: {
        id: '',
        access_token: '',
        userid: '',
        username: '',
        full_name: '',
        profile_picture: ''
    },
    urlRoot: "/api/user/",
    initurl: function() {
        return "https://api.instagram.com/v1/users/"+this.get('userid')+"/media/recent/?access_token=" + this.get('access_token');
    },
    initialize: function() {
        this.set('id', $('#domdump .id').val());
        this.fetch({
            success: function(model) {
                var photos = new App.Collections.Ig_photos([],{
                    url: model.initurl()
                });
            }
        });
    }

});

存储下一个分页网址的模型

App.Models.Ig_next_url = Backbone.Model.extend({
    defaults: {
        next_url: ''
    },
    next_url:function(){
        return this.get('next_url');
    }
});

照片的模型

App.Models.Ig_photo = Backbone.Model.extend({});

多张照片的集合

App.Collections.Ig_photos = Backbone.Collection.extend({
    model: App.Models.Ig_photo,
    initialize: function(model, options) {
        this.url = options.url;
        this.nextSet();
    },
    sync: sync_jsonp,
    parse: function( response ) {
        if(response.pagination && response.pagination.next_url && response.pagination.next_url != this.url){
            var next_url = new App.Models.Ig_next_url({ next_url: response.pagination.next_url });
            this.url = next_url.next_url();
        }
        return response.data;
    },
    nextSet: function(){
        this.fetch({
            success: function(photos){
                var ig_photos_views = new App.Views.Ig_photos_view({ collection: photos});
                console.log(photos);
            }
        });
    }
});

此外,我还有一些视图可以使用加载更多按钮来调用渲染集合的下一组。

我想要实现的是将照片附加到nextset()上的集合中,并使用以前的数据+新数据更新集合,但现在它被覆盖了。

还可以从modelfetch实例化新集合吗?

1 个答案:

答案 0 :(得分:7)

您不需要制作新视图。您应该听取集合上触发的“添加”事件并相应地渲染新项目。

nextSet: function(){
    this.fetch({add : true}); // The add option appends to the collection
}

此选项在very good documentation

中详细说明