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

Question

我有需要显示/编辑的数据，这些数据似乎与 Marionette 提供的内置 View 不自然。让我举个例子来说明。

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

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

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

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

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

Answer 1

正如您已经发现的那样，您可以通过多种不同的方式来完成这项工作。每个选项都将更适合一组特定的情况，但也有可能您的情况没有“最佳”方法来完成您想要的。如果是这种情况，只需选择一个并继续前进。 :)

将标签映射到单个值

这就是您已经提出的建议。它适用于标签数量相对较少并且您不需要在有人点击特定标签时采取任何自定义操作的情况。例如，如果您只是将每个标签设置为 <a href="#{tag-name}">链接，您可以使用向下映射到简单数组的标签轻松地做到这一点。

迭代模板中的标签集合

与映射选项基本相同，除了不是将标签简化为简单的字符串数组，而是将模板中的标签集合作为模型迭代，并调用 model.get(...) 以便获取您需要的数据。

如果您使用的是像 Handlebars 这样的模板引擎，这将变得非常容易，并且通过使用子模板可能会产生更干净的结果。

不过，我可能不会为下划线模板推荐这种方法，因为在进行迭代时，它们往往会很快变得困惑和丑陋。

CollectionView 的 CollectionView，使用布局

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

配置itemView用于收集书籍作为布局。布局中将有一个区域，该区域将填充另一个 Collection View 以呈现每个单独的标签。

这样做的好处是，您可以拥有更多与正在呈现的个人标签相关联的代码和功能。每个标签都有一个 View 实例，这意味着可以更轻松地封装和组织该代码。

缺点是每个标签都有一个 View 实例，并且需要编写更多代码才能设置和运行。

CompositeViews的CollectionView

复合 View 可让您围绕集合呈现包装器模板，这可能被证明是优于 CollectionView 的优势。

您仍然需要一个 CollectionView。此 CollectionView 将呈现一个 CompositeView，因为它是 itemView。 . CompositeView 将指定 itemViewContainer呈现标签集合。每个标签都有自己的 View 实例。

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

---

就我个人而言，我要么通过 map/reduce 将标签简化为一个简单的数组，要么使用 CompositeViews 的 CollectionView。