骨干集合。 ＆＃34;加载更多＆＃34;按键

Question

我对骨干很新，并尝试在项目中添加“加载更多”按钮。我想要加载按钮，每次点击时我都会从我的收藏中说出六个新项目。我该如何实现呢？

现在我在视图initziales时加载了整个集合。但我想加载六件物品会更好吗？ （那些将是可见的）然后我想在每次点击“加载更多”时附加六个新的。

任何可以告诉我/帮我的人吗？

集合

define([
'Underscore',
'Backbone',
'app',
'VideoModel',
], function (_, Backbone, app, VideoModel) {

var VideoCollection = Backbone.Collection.extend({  
    model: VideoModel,  
    url: url,
    parse: function (response) {
        return response;
    },
    initialize: function() {

    }    
}); 
return VideoCollection;

}）;

模型

define([
'Underscore',
'Backbone',
'app',

]，函数（_，Backbone，app）{

var VideoModel = Backbone.Model.extend({  
    defaults: function() {  
        return {
            data: {
                id: "",
                created: "",
                timestamp: ""
            }
        };
    },  
    clear: function() {  
        this.destroy();  
    }
}); 
return VideoModel;

}）;

查看

define([
'Underscore',
'Backbone',
'app',
'VideoCollection'

]，function（_，Backbone，app，VideoCollection）{

var StartView = Backbone.View.extend({

    tagName: "section",
    id: "start",
    className: "content",

    events: {

    },
    initialize: function(){
        $(".container").html(this.el);
        this.template = _.template($("#start_template").html(), {} );
        this.collection = new VideoCollection();
        this.render();
    },
    render: function(){
        this.$el.html(this.template);
        this.collection.fetch({
            success: function (obj) {
                var json = obj.toJSON()

                for(var i=0; i<json.length; i++) {

                }
            }
        });
    },
    kill: function() {
        this.remove(); 
    }
});
return StartView;
});

Answer 1

我想说最好的办法是使用同一个集合的2个实例。其中包含所有模型的模型，以及其中包含可见模型的模型。您可以将视图绑定到“可见”集合，当您单击加载更多时，只需将模型从完整集合复制到可见集合。我不会为此编写代码，因为您的StartView需要进行一些重构，我会尝试按照您的观点执行以下操作：

• 从您的视图中移除您的collection.fetch和render来电，并将其移动到控制您的应用程序的对象中，设置您的视图等。这样，视图就是一个相当愚蠢的对象，它知道它的DOM元素，它需要渲染的集合，以及它的内容。

• 请勿使用fetch成功回调。成功调用fetch会导致add或remove事件被触发。您可以像这样绑定到这些事件：

this.collection = new VideoCollection();

this.collection.bind('add remove', this.render, this);

this.collection.fetch();