Backbone Marionette：在 ItemView 中渲染集合答案

【问题标题】：Backbone Marionette: Rendering Collection in ItemViewBackbone Marionette：在 ItemView 中渲染集合
【发布时间】：2014-04-08 23:11:24
【问题描述】：

我找不到与此错误相关的任何帖子。我正在尝试在 Marionette ItemView 中呈现主干集合。模板已渲染，但是与集合相关的数据并未在模板中渲染。我没有收到任何错误或其他指标。由于我不明白的原因，在App.mainRegion.show(overView) 上使用setTimeout()。但是，我知道这不是一个可接受的解决方案。有人能给我一些关于如何在这种情况下正确呈现 Collection 的 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>'),
});

我的相关执行代码：

var API = {
    getAbouts: function() {
        var abouts = new App.About.Collection();
        abouts.fetch();
    return abouts;
    },
    ...
}

var abouts = API.getAbouts();

var aboutsListView = new App.About.ListView({collection: abouts }),
aboutsOverView = new App.About.OverView({collection: abouts});

// Correctly renders collection data
App.listRegion.show(aboutsListView);

// Does not render collection data
App.mainRegion.show(aboutsOverView);

// unless
setTimeout(function() {App.mainRegion.show(aboutsOverView)}, 50);

对于那些感兴趣的人，我正在使用 ItemView 最终意图显示 About.Collection 的聚合数据。如果需要，我很乐意提供更多信息。

【问题讨论】：

标签： backbone.js marionette backbone-views

【解决方案1】：

这是您的collection 上的fetch 调用的异步性质的问题。当您显示两个views 时，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);
    }
});

【讨论】：

【解决方案2】：

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

您调用getAbouts，它本身调用abouts.fetch 对服务器进行GET 调用以进行收集。
进行了listRegion.show 和mainRegion.show 调用，使用空集合呈现两个视图（集合尚未收到来自服务器的响应）。
GET 调用最终返回，集合中填充了数据。
只有 aboutsListView 会重新渲染以显示数据（原因见下文）。

只有 aboutsListView 重新渲染的原因是 Marionette CollectionView 自动监听集合的 reset 事件，该事件在集合内容被替换时触发。

您可以通过简单地将initialize 函数添加到您的OverView 来解决此问题，这样视图也会重新呈现以响应相同的事件：

// add to About.OverView:

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

这会解决的。

【讨论】：