основа. Кнопка «загрузить больше»

Question

Im совершенно новый для создания основы и попытки добавить «загрузить больше», новичок в проекте. Я хочу, чтобы кнопка загружалась, каждый раз, когда ее щелкают, можно сказать, что шесть новых предметов из моей коллекции. Как мне это реализовать?

Прямо сейчас у меня есть вся коллекция, загруженная при представлении 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' 

], функция (_, Backbone, приложение, 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();