Простая коллекция Backbone.js с бесконечным пейджингом

Мой серверный API следует классической модели подкачки результатов, например.

/api/transactions/ => страница 1 (ограничение по умолчанию — 10 элементов) /api/transactions/?p=2 => страница 2

Я хочу построить систему бесконечной прокрутки с представлениями Backbone.

У меня уже есть неподкачиваемая коллекция+представления. Родительское представление выглядит так:

Backbone.View.extend({

    initialize: function() {

        this.collection = TransactionCollection;
        this.fetch();

        this.listenTo( this.collection, 'reset', this.renderEntries );
        this.listenTo( this.collection, 'add', this.fetch );

        this.rowViews = [];
        this.render();
    },

    fetch: function() { 
        this.collection.fetch({ reset:true });
    },

    render: function() {

        this.$el.html( template() );
        this.renderEntries();

        return this;
    },

    renderEntries: function() {
        this.clearEntryRows();
        this.collection.each(function(item) {
            var row = new TransactionItemView( item );
            this.rowViews.push( row );
            this.$el.find('.entry-list').append( row.render().el );
        }, this);
    },

    clearEntryRows: function() {
        this.rowViews.forEach(function(v) {
            if (v.close) v.close();
        });
        this.rowViews = [];
    },

// ...
}

Это важная часть кода представления (дочерние представления — это простые представления элементов, визуализирующие себя с помощью шаблона).

Коллекция по-прежнему очень проста:

var TransactionCollection = Backbone.Collection.extend({
    model: Transaction,
    url: '/api/transactions'
});

Теперь пришло время добавить пагинацию. Я думаю, что добавлю кнопку "БОЛЬШЕ..." после каждого вызова renderEntries(). Эта кнопка будет вызывать следующую страницу (без сброса коллекции), и вызывается другой renderEntries. this.clearEntryRows() будет перемещен в обратный вызов сброса.

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

Итак, если это правильно, я могу очищать строки ввода только при событии сброса и отображать строки синхронно. Но как я могу отображать в моем списке только недавно добавленные (например, страницу 2) строки?

Я немного запутался.


javascript backbone.js backbone-events backbone.js-collections
person Fabio B.    schedule 18.09.2014    source источник
comment
В этом случае я думаю, что вы можете использовать только событие add вместо reset и добавлять новые элементы в контейнер.   -  person Eugene Glova    schedule 18.09.2014

Ответы (1)


arrow_upward
1
arrow_downward 

this.collection.fetch({ add: true, remove: false, merge: false, data: {p: 2} });

это позволяет вам получать с указанными параметрами получения и добавлять в коллекцию только несуществующие записи.

На ваш взгляд:

initialize: function () {
    this.listenTo(this.collection, 'add', handlerForRenderingNewEntries);
}

Чтобы отображать только новые модели, вы можете вернуть их с указанным атрибутом, например, с дополнительным свойством «страница». Отфильтруйте их по этому атрибуту и ​​отправьте на рендер.

person aleha    schedule 18.09.2014