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个项目(应该会发生).但是,当我点击"setperpage"事件时<span>10</span>,即使更新了网址然后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});