Question

我正在看这里的例子http://davidsulc.github.io/backbone.marionette-nested-views/它显示了如何创建一个超级英雄的列表，并且每个英雄都有一个内部恶棍列表。

如何将此扩展到不仅列出每个英雄的恶棍，还列出他们最喜欢的三种颜色？例如。

所以我可以拥有像

这样的东西

Batman
-----------------------------------
Bane             |  Black
Ra's Al Ghul     |  Blue
The Joker        |  Orange
The Riddler      |
===================================
Spiderman
-----------------------------------
Green Goblin     |  Red
Venom            |  Green
                 |  Violet
===================================
Wonder Woman
-----------------------------------
Ares             |  Silver
Doctor Psycho    |  Purple
Silver Swan      |  White
===================================

在复合视图中，好像我需要两组项目视图和项目容器，类似

HeroView = Backbone.Marionette.CompositeView.extend({
  template: "#accordion-group-template",
  className: "accordion-group",
  itemView: VillainView,
  itemViewContainer: "#villainUL",
  itemView2: FavoriteColorView,
  itemViewContainer2: "#colorUL",
  ...

但当然这样的事情不存在。

编辑：这个http://jsfiddle.net/derickbailey/AdWjU/可能会作为解决方案，但我必须等到早上才能适应它。

Answer 1

首先，希望您了解我编写的博客文章，其中包含以下代码：http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/

坏消息：我认为你实际上需要更多的工作来实现你想要的......

您链接的jsFiddle（http://jsfiddle.net/derickbailey/AdWjU/）显示子元素元素的列表。你想要做的是显示两个单独的列表！

以下是我要尝试的内容：您需要将VillainView（ItemView}替换为我们称之为HeroInfo的布局，在此布局中您需要声明2个区域（一个用于反派名单，另一个用于颜色）。此新布局也不会在ul内呈现，因此您可以从视图定义和模板中删除itemViewContainer。

请注意，您可能无法将布局区域指定为对象（您不能在模板中使用ID，因为它们将被重复，您可能无法访问this.$el）。如果是这种情况，您需要使用以下内容对其进行初始化：

initialize: function(){
  // assuming you have an element with class "js-villain-region" in your layout template
  this.addRegion("villainRegion", this.$el.find(".js-villain-region").first());
}

接下来，您需要定义要在“show”事件的布局区域中显示的VillainView和ColorView（两者都是集合视图）（请参阅示例代码，使用此处的布局： https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L43

我希望这有助于让你走上正确的道路！

此外，作为旁注：这似乎比第一眼看上去更具挑战性。如果你这样做是为了学习经验，不要气馁：你正在尝试一个具有挑战性的复杂视图实现，这在第一次进入Marionette时会很棘手。

MarionetteJS - 多个嵌套的并排视图

1 个答案: