backbone.js - 每次分页获取后将数据附加到同一集合

Question

我正在尝试使用主干填充 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()
                });
            }
        });
    }

});

用于存储分页的下一个 url 的模型

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

此外，我还有一些 View 使用调用集合的下一个集合的加载更多按钮进行渲染。

我试图实现的是在 nextset() 时将照片附加到集合中，并且该集合使用以前的数据 + 新数据进行更新，但现在它被覆盖了。

也可以从 modelfetch 实例化新集合吗？

Answer 1

您不需要创建新 View 。您应该改为监听在集合上触发的“添加”事件并相应地呈现新项目。

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

此选项在 very good documentation 中有详细说明。 .