骨干收集。 “加载更多”按钮

对于主干我很陌生，并且试图添加一个“加载更多”按钮来实现项目。我希望加载按钮可以在每次点击时从我的收藏中说出六个新项目。我将如何实现？骨干收集。 “加载更多”按钮

现在我有整个集合加载时查看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',

]，功能（_，骨干，应用程序）{

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

}）;

查看

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

]功能（_，骨干，应用程序，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; 
});

来源

2013-12-17 user2952238

我会说最好的办法是使用同一个集合的两个实例。其中包含所有模型的模型，以及仅包含可见模型的模型。您可以将视图绑定到“可见”集合，并且当您单击加载更多时，只需将模型从完整集合复制到可见集合。我不会为此编写的代码，因为你StartView因为它代表需要一点重构的，我会尝试做你的看法如下：

从删除您collection.fetch和render您的来电视图，并将它们移动到控制应用程序的对象中，设置视图等。这样，视图就是一个非常愚蠢的对象，它知道它是DOM元素，它需要呈现的集合，这就是它。
请勿使用fetch成功回调。成功拨打fetch将导致add或remove事件被解雇。您可以绑定到这些事件的，像这样：

this.collection = new VideoCollection();

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

this.collection.fetch();

来源

2013-12-17 14:29:22 jcvandan

骨干收集。 “加载更多”按钮

回答

相关问题