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的文档 - 它有一个如何使用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) %>
<% }); %>

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

3 个答案: