Backbone.js 主干收集&引用；“加载更多”；按钮

我对主干网很陌生，正在尝试为项目添加一个“加载更多”按钮。我想让按钮加载，比如说每次点击时都会从我的收藏中加载六个新项目。我将如何实现这一点

现在我已经在视图初始化时加载了整个集合。但我想最好只装六件东西？（将可见的）然后我想在每次点击“加载更多”时添加六个新的

有人能在这件事上给我看/帮我吗

收藏

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;

}))

模型

]，功能（u2;，主干，应用程序）{

}))

看法

]，功能（网络、主干网、应用程序、视频采集）{

var StartView=Backbone.View.extend({
标记名：“节”，
id:“开始”，
类名：“内容”，
活动：{
},
初始化：函数（）{
$（“.container”）.html（this.el）；
this.template=..template（$（“#开始#模板”）.html（），{}）；
this.collection=新的VideoCollection（）；
这个。render（）；
},
render:function（）{
this.$el.html（this.template）；
这是我的收藏({
成功：功能（obj）{
var json=obj.toJSON（）
对于（var i=0；i我认为最好的做法是使用同一集合的两个实例。一个实例中包含所有模型，另一个实例中仅包含可见模型。您可以将视图绑定到“可见”集合，当您单击“加载更多”时，只需将模型从完整集合复制到可见集合。我不打算编写这方面的代码，因为您的
StartView
目前需要进行一些重构，我将尝试对您的视图执行以下操作：


删除
集合。从视图中提取
和
渲染
调用，并将它们移动到控制应用程序、设置视图等的对象中。这样，视图就相当于一个哑对象，它知道自己的DOM元素、需要渲染的集合，等等

不要使用
fetch
success回调。成功调用
fetch
将导致触发
add
或
remove
事件。您可以像这样绑定到这些事件：


this.collection=new VideoCollection（）；

this.collection.bind（'add-remove'，this.render，this）；

this.collection.fetch（）；

define([
'Underscore',
'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'

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