我需要显示/编辑的数据似乎不适合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合作的方法是什么。感谢。
答案 0 :(得分:5)
正如您已经发现的那样,您可以采用多种不同的方式来完成这项工作。每个选项都更适合特定情况,但您的情况也可能是没有“最佳”方式来实现您想要的。如果是这种情况,只需选择一个然后继续。 :)
这是你已经建议的。它适用于标签数量相对较少的情况,并且当有人点击特定标签时您不需要执行任何自定义操作。例如,如果您只是将每个标记设置为<a href="#{tag-name}">
链接,则可以使用映射到简单数组的标记轻松完成此操作。
基本上与映射选项相同,除了不将标记缩减为简单的字符串数组之外,您可以将模板中的标记集合作为模型进行迭代,并调用model.get(...)以便获取您需要的数据。
如果你正在使用像Handlebars这样的模板引擎,这很容易做到,并且可以通过使用子模板产生更加干净的结果。
我可能不会建议这种方法用于下划线模板,因为它们在进行迭代时往往会变得浑浊和丑陋。
这是更复杂的选项,但也是最有能力的。
将书籍集合的itemView
配置为布局。布局中将包含一个区域,并且该区域将填充另一个集合视图以呈现每个单独的标记。
这样做的好处是,您可以拥有与正在呈现的单个标记相关的更多代码和功能。每个标记都有一个视图实例,这意味着将代码封装和组织起来会更容易。
缺点是你会为每个标签创建一个视图实例,并且只需要编写更多代码来设置和运行它。
compositeview允许您围绕集合渲染包装器模板,这可能比CollectionView更有优势。
你还需要一个CollectionView。此CollectionView将呈现一个CompositeView,因为它是itemView
。 CompositeView将指定itemViewContainer
来呈现标记集合。每个标签仍然是它自己的视图实例。
您可以通过这种方式摆脱布局和区域。可视化结果与使用带有布局的CollectionView相同,但执行此操作的代码量可能会显着减少。
就个人而言,我会使用map / reduce将标记转换为简单数组,或者使用CollectionView Of CompositeViews。