使用 Backbone Marionette 将多个集合渲染到区域中答案

【问题标题】：Rendering Multiple Collections into Region with Backbone Marionette使用 Backbone Marionette 将多个集合渲染到区域中
【发布时间】：2014-06-05 20:10:30
【问题描述】：

在构建了几个普通的 Backbone 应用程序之后，我刚刚开始尝试 Marionette。刚走出大门，我就遇到了一些关于区域管理和多个集合的问题。

我有以下嵌套模型和集合结构

FoosCollection
   FooModel
      BarsCollection
         BarModel

我想利用 Marionette 提供的所有出色视图和布局/区域管理器。但是，我需要以一种独特的方式在页面上呈现这些信息。我的 HTML 如下所示：

<div id="container">
     <div id="foos-description"></div>
     <div id="bars-list"></div>
</div>

基本上，来自每个 FooModel 的一些高级信息需要呈现到 foos-description 元素中。然后，需要将每个 BarsCollection 渲染到 bars-list 中。该结构需要使列表直接位于foos-description 容器中相应信息的下方。

所以，我很想使用 CompositeViews 来解决这个问题，但看起来 View/DOM 元素结构也需要以与集合/模型结构嵌套相同的方式嵌套，这在我的案例。

我还添加了两个区域

App.addRegions({
  foosDescription: "#foos-description",
  barsList: "#bars-list"
});

我的初始化代码如下所示

App.addInitializer(function (options) {
    App.foosCollection = new FoosCollection(options.foos, {bars: options.bars});
    App.foosDescription.show(new FoosView({collection: App.foosCollection}));
    App.foosCollection.each(function(f) {
        app.barsList.show(new BarsView({collection: f.barsCollection}));
    })

});

显然，这只会显示barsList 区域中的最后一个 BarsCollection，但我不确定我应该如何构造它，以便每个集合都附加到该区域。任何帮助将不胜感激。

【问题讨论】：

标签： backbone.js marionette

【解决方案1】：

您需要show该地区的视图：

// tweaked region and view names for clarification
App.foosDescriptionRegion.show(foosDescriptionView);

【讨论】：