骨幹收集。 「加載更多」按鈕

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', 

]，功能（_，骨幹，應用程序）{

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

Answer 1

我會說最好的辦法是使用同一個集合的兩個實例。其中包含所有模型的模型，以及僅包含可見模型的模型。您可以將視圖綁定到「可見」集合，並且當您單擊加載更多時，只需將模型從完整集合複製到可見集合。我不會爲此編寫的代碼，因爲你StartView因爲它代表需要一點重構的，我會嘗試做你的看法如下：

• 從刪除您collection.fetch和render您的來電視圖，並將它們移動到控制應用程序的對象中，設置視圖等。這樣，視圖就是一個非常愚蠢的對象，它知道它是DOM元素，它需要呈現的集合，這就是它。

• 請勿使用fetch成功回調。成功撥打fetch將導致add或remove事件被解僱。您可以綁定到這些事件的，像這樣：

this.collection = new VideoCollection();

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

this.collection.fetch();