在 marionette.js 中使用嵌套模板的最佳实践

Question

我一直在研究单页应用程序，并从今天开始使用 Marionette.js。 我发现应用程序的整体结构非常有效（模块、事件等），当使用复杂的数据结构时，我不知道如何使用模板（视图）来获取其中的大部分。我习惯于类似把手的模板，这些模板可以做一些额外的逻辑和嵌套。

显示嵌套模板的最佳做法是什么？

考虑一下这个包含嵌套数据的不那么复杂的数据结构：

[{name:"John", addresses:
  [
    {street:"John Street",city:"New York, NY"},
    {street:"John Street",city:"Madrid, PA"}
  ],
  notes: [{note:"note1"},{note:"note2"}]
  },
  {name:"Alex", addresses:
  [
    {street:"Alex Street",city:"New York, NY"},
    {street:"Alex Street",city:"Madrid, PA"}
  ],
  notes: {}}
]

如何有效地将第一级数组呈现为表格行和内部数组（如“地址”和“注释”）到行中的各个列（例如，以另一个表格的形式）。

Answer 1

Marionette 提供了 Collection 和 CompositeViews 来呈现对象集合。 使用 CompositeView 可以有效地呈现表格 请参阅CompositeView 的文档 - 它有一个如何使用复合视图呈现表格的示例。

为了呈现复杂的嵌套结构，最好使用 Handlebars，因为它允许引用嵌套字段示例：{{x.y}}

Answer 2

您可以使用CollectionView，您的数组将作为其collection 传递给视图，然后您可以循环遍历每一行的addresses 以显示它们。

我不会为addresses 数组的每个元素创建视图，因为不需要自己管理它们，它们会在显示主视图时显示（对吗？）。

所以你可以有这样的东西

NoUsers = Backbone.Marionette.ItemView.extend({
  template: "#no-users-template"
});

当传递的collection为空时使用

User = Backbone.Marionette.ItemView.extend({});

它将定义如何呈现单个用户（您的顶级数组元素），您可以使用 Handlebars 执行 addresses 循环，类似于

<div>
  {{ #each addresses }}
  <span>{{ street }} - {{ city }}</span>
  {{/each}}
</div>

Users = Backbone.Marionette.CollectionView({
  itemView: User,
  emptyView: NoUsers
});

这将定义它们如何一起发挥作用，有关详细示例，请参阅由 Marionette 的创建者 DErick Bailey 制作的 this example app。

Answer 3

如果你使用下划线，你可以这样做

<%= Marionette.Renderer.render('#your-template', {
    your: data,
    goes: here
}) %>

或者更好的例子是

<% _.each(someArrayOnModel, function(item) { %>
    <%= Marionette.Renderer.render('#templateForItem', item) %>
<% }); %>