使用Backbone.Marionette在集合中显示集合

时间:2012-11-01 19:41:07

标签: marionette

我需要显示/编辑的数据似乎不适合Marionette提供的内置视图。让我举一个例子来说明。

说我想列出/编辑书籍。每本书都有一个ISBN,一个标题和0个或更多标签。基本上,信息的显示将是表格式的(标签下的每个单词都是一个单独的标签,可以单独编辑/删除):

+---------+----------------+-----------------------------+
|ISBN     |Title           |Tags                         |
+=========+================+=============================+
|12345678 |My Last Summer  |vacation diary kids          |
+---------+----------------+-----------------------------+
|12354389 |The Day After   |fiction future               |
+---------+----------------+-----------------------------+

如果每本书只有一个标签,那么CompositeView / ItemView可以很好地工作。我想的是在每行的最后一个单元格中动态创建区域,然后使用CompositeView / ItemView来处理标记列表。也许这有点矫枉过正,在模板中使用某种迭代器是可行的方法。

我考虑过捕获标签并使用特定书籍的标签列表填充单个字符串。我可以通过操作从后端接收的数据来做到这一点,从而将标记列表组成一个数据元素,这样我就可以使用CompositeView / ItemView作为一个简单的表来处理它。这确实引入了额外的“映射”,实现“编辑”视图会变得更加复杂。

所以我只是希望听到人们是否遇到过这种要求,以及与Marionette合作的方法是什么。感谢。

1 个答案:

答案 0 :(得分:5)

正如您已经发现的那样,您可以采用多种不同的方式来完成这项工作。每个选项都更适合特定情况,但您的情况也可能是没有“最佳”方式来实现您想要的。如果是这种情况,只需选择一个然后继续。 :)

将标签映射到单个值

这是你已经建议的。它适用于标签数量相对较少的情况,并且当有人点击特定标签时您不需要执行任何自定义操作。例如,如果您只是将每个标记设置为<a href="#{tag-name}">链接,则可以使用映射到简单数组的标记轻松完成此操作。

在模板中迭代标记集合

基本上与映射选项相同,除了不将标记缩减为简单的字符串数组之外,您可以将模板中的标记集合作为模型进行迭代,并调用model.get(...)以便获取您需要的数据。

如果你正在使用像Handlebars这样的模板引擎,这很容易做到,并且可以通过使用子模板产生更加干净的结果。

我可能不会建议这种方法用于下划线模板,因为它们在进行迭代时往往会变得浑浊和丑陋。

CllectionViews的CollectionView,使用布局

这是更复杂的选项,但也是最有能力的。

将书籍集合的itemView配置为布局。布局中将包含一个区域,并且该区域将填充另一个集合视图以呈现每个单独的标记。

这样做的好处是,您可以拥有与正在呈现的单个标记相关的更多代码和功能。每个标记都有一个视图实例,这意味着将代码封装和组织起来会更容易。

缺点是你会为每个标签创建一个视图实例,并且只需要编写更多代码来设置和运行它。

CompositeViews的CollectionView

compositeview允许您围绕集合渲染包装器模板,这可能比CollectionView更有优势。

你还需要一个CollectionView。此CollectionView将呈现一个CompositeView,因为它是itemView。 CompositeView将指定itemViewContainer来呈现标记集合。每个标签仍然是它自己的视图实例。

您可以通过这种方式摆脱布局和区域。可视化结果与使用带有布局的CollectionView相同,但执行此操作的代码量可能会显着减少。


就个人而言,我会使用map / reduce将标记转换为简单数组,或者使用CollectionView Of CompositeViews。