backbone.js渲染视图

Question

我的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个项目(这是理所当然的)。但是当我点击<span>10</span>点击"setperpage“事件时，即使url被更新然后fetch()被调用，列表也永远不会更新。(我看过带有firebug的请求，所以我知道我在json中得到了10个条目)。为什么不重新渲染呢？我仍然只看到5个项目。

Answer 1

this.collection.fetch();是异步的，因此对render的调用仍将使用旧数据。

在调用渲染函数之前，您需要等待fetch()完成。

在初始化函数中，将呈现函数绑定到"reset“事件。

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

当您需要新数据时，调用

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