Коллекция отложенных загрузок backbonejs

Question

Посмотреть список

 define(['jquery', 'underscore', 'backbone', 'text!views/abcView/abcListView.html','views/abcView/ListTemplate' ,'app/utils', 'collection/abcListCollection'], function($, _, Backbone, tmpl_abcummaryView, abcListView, Utils, abcListCollection) {

var abcListView = Backbone.View.extend({
    // Setting the view's template property using the Underscore template method        
    template: _.template(tmpl_abcummaryView),
    // View constructor
    initialize: function() {            
        mainRouter.collections.abc = new abcListCollection();            
    },
    // View Event Handlers
    events: {

    },
    // Renders the view's template to the UI
    render: function() {
        var self=this;
        this.$el.html(this.template({data: this.templateData}));            
        mainRouter.collections.abc.fetchData({
                success: function (collection, response) {
                    _.each(collection, function (obj) {  
                        html = new abcListView({model: obj}).render();
                        self.$el.find('#abcList').append(html);                            
                    })
                },
                error: function (err) {
                    console.log("error");
                }
        });
        // Maintains chainability
        return this;
    }
});
return abcListView;
 });

коллекция

 define(['underscore', 'backbone', 'models/abcModel', 'app/utils'], function(_, Backbone, abcModel, Utils) {

var self;
//List of Alerts stored in Backbone Collection
abcListCollection = Backbone.Collection.extend({
    model: abcSummaryModel,
    initialize: function() {           
        self = this;
        _.bindAll(this, 'fetchData');
    },

   fetchData: function(obj) {           
        add=true;
        var data = {
            "method": "method name",
            "params": {
                param1:"param1",
                param2:"param2"
            }
        }

        Utils.Ajax.post(Utils.WebAPI.WebAPIServer, data, function(response, textStatus, jqXHR) {                                
            obj.success.call(self.collection, response);
        }, 'json', function(err) {
            console.log(JSON.stringify(err));
            obj.error.call(err);
        }, "loading");

    },
    collection: {}
});
return abcListCollection;
});

Как выполнить отложенную загрузку коллекции, т.е. отображать 5 элементов изначально, а когда пользователь прокручивает экран, выбирает следующие 5 записей?

Answer 1

Прежде чем делать что-либо еще, ваш веб-сервис должен иметь способ вернуть подмножество элементов на основе переданных параметров. Для простоты мы будем называть это номером страницы. Например, скажем, ваш веб-сервис принимает параметр страницы, который будет возвращать 5 элементов на основе номера страницы (поэтому страница 1 возвращает элементы 1-5, страницы 2 6-10 и т. Д.).

Затем вам нужно отслеживать, на какой странице находится ваша коллекция, а затем, основываясь на этом, каждый раз, когда вы хотите загрузить больше моделей, вы увеличиваете номер страницы своей коллекции и выбираете, передавая параметр страницы.

Например, каждый раз, когда вы хотите получить больше моделей:

var MyCollectionView = Backbone.View.extend({
    //...
    pageNumber:0,


    fetchNewItems: function () {
      this.pageNumber++;
      this.collection.fetch({data: {pageNumber: this.pageNumber}});
    }

 }

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

В вашем конкретном случае похоже, что вы на самом деле не используете выборку магистрали для выполнения ваших запросов, однако принцип остается тем же.

Пара других моментов: вы можете захотеть только увеличить pageNumber в вашем успешном обратном вызове, и вы можете либо установить флаг, как только все ваши элементы загружены, чтобы вы не продолжали делать запрос на выборку или отменяли привязку вашего обработчика событий для событие прокрутки (например, как только вы вернете пустой массив из вашего сервиса).