Backbone.js 主干木偶网：在ItemView中呈现集合

我找不到任何与此错误相关的帖子。我试图在木偶项目视图中呈现主干集合。将呈现模板，但与集合相关的数据不会呈现在模板中。我没有得到任何错误或其他指标。出于我不理解的原因，在

App.mainRegion.show（概述）

上使用

setTimeout（）

。然而，我知道这不是一个可接受的解决办法。在这种情况下，有人能给我一些关于如何使集合的ItemView正确呈现的见解吗？以下是我的简化代码：

我的收藏将被呈现：

About.Collection = Backbone.Collection.extend({
    url: '/api/about',
    idAttribute: '_id',
});

涉及的视图定义：

About.ListView = Marionette.CollectionView.extend({
    tagName: 'ul',
    itemView: App.About.ListItemView,   
});

About.OverView = Marionette.ItemView.extend({
    tagName: 'div',
    className: 'inner',
    template: _.template('<h2>About Overview</h2><p><%= items %></p>'),
});

---

对于那些感兴趣的人，我使用的是ItemView，最终目的是显示

About.Collection

的聚合数据。如果需要，我很乐意提供额外的信息。

这是一个关于

集合的
获取
调用的异步性质的问题。显示两个
视图时，
集合的数据未返回。如果您更新了代码的执行部分，如以下所示（未测试），您应该处于正确的轨道上：

var API = {
    getAbouts: function() {
        // Just return the new collection here
        return new App.About.Collection();
    },
    ...
}

// Fetch the collection here and show views on success
var abouts = API.getAbouts().fetch({
    success: function() {
        var aboutsListView = new App.About.ListView({collection: abouts }),
        aboutsOverView = new App.About.OverView({collection: abouts});

        // Should render collection data now
        App.listRegion.show(aboutsListView);

        // Should render collection data now
        App.mainRegion.show(aboutsOverView);
    }
});

abouts.fetch的
调用是异步的，在集合从服务器接收数据之前要经过相当长的时间。这是事情发生的顺序：


您可以调用
getAbouts
，它本身调用
abouts.fetch
来调用服务器进行收集
调用了
listRegion.show
和
mainRegion.show
，呈现了带有空集合的两个视图（集合尚未收到服务器的响应）

GET调用最终返回，并用数据填充集合
只有aboutsListView重新呈现以显示数据（原因见下文）

只有AboutListView重新呈现的原因是，木偶收集视图会自动侦听收集的
重置
事件，该事件在收集的内容被替换时触发

您只需将
初始化
函数添加到
概述
，即可解决此问题，这样视图也会响应相同的事件重新呈现：

// add to About.OverView:

initialize: function() {
    this.listenTo(this.collection, 'reset', this.render);
}

这样就可以了

// add to About.OverView:

initialize: function() {
    this.listenTo(this.collection, 'reset', this.render);
}