使用marionette模板的backbone.js集合视图示例

Question

请您通过木偶模板系统向我推荐一些显示列表视图的示例。基本上，我有一个木偶模板，基于模板，我正在创建一个表格列表。

Answer 1

要使用Backbone Marionette创建表行列表，您需要定义五件事：

• 每行的模型
• 用于保存所有行模型的集合
• 一个CollectionView来遍历集合
• ItemView以提供特定于行的功能
• ItemView的模板，为每行提供标记

示例用例

假设您有以下数据：

var stooges = [{ name: 'moe', age: 44, userid: 1}, 
               { name: 'larry', age: 44, userid: 2}, 
               { name: 'curly', age: 44, userid: 3}];

定义模型和集合

对于以下数据，您需要一个模型：

var StoogeModel = Backbone.Model.extend({});

您可以在其中为数据和其他属性设置一些合理的默认值，例如idAttribute。有很多关于如何自定义模型的参考资料。您的收藏集应至少采用stoogeModel。

var StoogeCollection = Backbone.Collection.extend({
  model: StoogeModel
});

设置您的观点

要将您的收藏集迭代并渲染到表格中，您只需要CollectionView和ItemView。

var StoogesCollectionView = Backbone.Marionette.CollectionView.extend({
  tagName: "table",
  childView: StoogeItemView
});

所有CollectionViews至少需要一个childView ItemView（我们在下面定义），他们将用它来推导为每一行创建html的功能，以及collection这是包含填充每行的模型的集合。我们在实例化stoogesCollectionView时会传递此集合。 tagName属性告诉Backbone将子项封装在table标记中。

var StoogeItemView = Backbone.Marionette.ItemView.extend({
  tagName: "tr",
  template: '#stooge-template'
});

<script type="text/template" id="stooge-template">
  <td id="name"><%= name %></td>
  <td id="age"><%= age%></td>
  <td id="userid"><%= userid%></td>
</script>

所有ItemViews都需要我们在HTML文档中定义的模板，此处为#stooge-template。如果ItemView是集合的子集，则不必定义其模型，它将由父CollectionView提供。每个子StoogeItemView呈现的HTML将由tr标记封装，因为我们想要的是集合视图中每个子项的行。

从ItemView您可以处理“行”级别的事件，例如行列上的click或focus。您还可以处理传入的模型的更改。此外，从ItemView您可以决定传入可以操纵数据在其模板中显示方式的帮助程序。

全部放在一起

现在我们已经定义了模型，集合，集合视图，子项视图和项视图模板。接下来，我们将连接所有这些部分。

填充您的收藏

将stooges数组传递给集合的构造函数。

var myStooges = new StoogeCollection(stooges);

这些塑造成模型，并加载你的收藏。

升级您的CollectionView

将已加载的集合传递到集合视图。

var myStoogesView = new StoogesCollectionView({ collection: myStooges  });

渲染视图

所有Marionette视图都附带render方法。在我们的例子中，调用

myStoogesView.render();

将创建一个<table>，其中包含三个<tr>元素，每个元素都包含一个列，分别用于数据集中的name，age和userid字段。要在DOM中插入生成的HTML，我们只需使用视图的el属性。对于简单，我们可以将视图直接注入身体

document.body.appendChild(myStoogesView.el);

或使用jQuery：

$(document.body).append(myStoogesView.el);

超越此示例

我们甚至没有开始讨论很多功能。阅读docs！并查看许多教程。希望这个简短的介绍有所帮助！