Backbone.js - просмотр рендеринга

My ListClass выглядит следующим образом:

var ListView = Backbone.View.extend({

    initialize: function() {
        this.render();
    },  

    events: {
        'click ul#perpage span': 'setperpage'
    },

    setperpage: function(event) {
        this.collection.perpageurl = '/perpage/' + $(event.target).text();
        this.collection.fetch();
        this.render();
    },

    render: function() {

    template = _.template('\
    <table>\
    <% _(collection).each(function(model){%>\
    <tr><td><%=model.id%></td><td><%=model.name%></td><td><%=model.email%></td></tr>\
    <%}); %>\
    </table>\
    <ul id="perpage">\
    <li><span>5</span></li>\
    <li><span>10</span></li>\
    </ul>\
    ');

        var context = {collection: this.collection.toJSON()};
        $(this.el).html(template(context));
        $('#app').html(this.el);
        return this;
    }
});

По какой-то причине, когда я впервые посещаю страницу, загружающую это представление, появляется 5 элементов (что должно произойти). Но когда я попал в событие "setperpage", нажав <span>10</span>, даже если URL обновлен, а затем вызывается fetch(), список никогда не обновляется. (Я смотрел запросы с firebug, поэтому я знаю, что возвращаю 10 элементов в json). Почему они не визуализируются? Я все еще вижу только 5 элементов.

Ответ 1

this.collection.fetch(); является асинхронным, поэтому вызов визуализации будет по-прежнему использовать старые данные.

Вам нужно дождаться завершения функции fetch() до вызова функции рендеринга.

В вашей функции инициализации привяжите функцию рендеринга к событию "reset".

this.collection.on("reset", function() { this.render(); }, this);

Когда вам нужны новые данные, вызовите

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