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() ，列表也不会更新。 （我已经看过萤火虫的请求了，所以我知道我要回到json的10件物品）。 他们为什么不渲染？ 我仍然只看到5个项目。

Answer 1

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

在调用render函数之前，需要等待fetch（）完成。

在初始化函数中，将render函数绑定到“reset”事件。

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

当您需要新数据时，请致电

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