Javascript backbone.js-渲染视图

我的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;
    }
});

var ListView=Backbone.View.extend({
初始化：函数（）{
这个。render（）；
},  
活动：{
“单击ul#每页跨距”：“设置每页”
},
setperpage:函数（事件）{
this.collection.perpageurl='/perpage/'+$（event.target）.text（）；
this.collection.fetch（）；
这个。render（）；
},
render:function（）{
template=\模板（'\
\
\
\
\
\
\
5
\
10
\
\
');
var context={collection:this.collection.toJSON（）}；
$（this.el）.html（模板（上下文））；
$（'#app'）.html（this.el）；
归还这个；
}
});

---

出于某种原因，当我第一次访问加载此视图的页面时，显示了5个项目（这是应该发生的）。但是当我点击

10

点击“setperpage”事件时，即使url被更新，然后调用

fetch（）

，列表也不会更新。（我已经观看了带有firebug的请求，因此我知道我将返回10个json项）。为什么不重新渲染呢？我仍然只看到5项。

这个

this.collection.fetch（）

是异步的，因此对render的调用仍将使用旧数据

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

在初始化函数中，将渲染函数绑定到“重置”事件

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

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

---

虽然你的前提是正确的，但你的解决方案是错误的。如果像那样绑定

this.render

，当调用

this.render

时，

this

将引用错误的内容。您必须分配

self=this

然后执行

self.render

而不是.FWIW，也可以通过使用

this.collection.bind（“刷新”，“函数（self）{return function（）{self.render（）；}；}（this））；

来解决。不过，您的解决方案可能更清晰。仅供参考，此功能已重命名为“重置”从V0.5开始，我将相应地更新上面的解决方案。为了保留对

this

的引用，我将使用

.bind

，或者更好地使用主干的

事件。在
上，第三个参数是可选的上下文：
this.collection.on（“reset”，function（）{this.render（）；}，this）；
为什么不这样写呢？
this.collection.on（'reset'，this.render，this）；
？
this.collection.fetch({reset: true});