使用 Marionette 模板的backbone.js Collection View 示例

Question

您能否建议我一些通过 Marionette 模板系统显示 ListView 的示例。基本上，我有一个 Marionette 模板，并基于该模板创建一个表格列表。

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
});

设置您的 View
要迭代您的集合并将其呈现为表格，您只需要一个 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 提供.每个 child 渲染的 HTML StoogeItemView将被 tr 封装标签，因为我们想要的是 Collection View 的每个 subview 的一行。
来自 ItemView您可以在“行”级别处理事件，例如 click或 focus在行列上。您还可以处理对传入模型的更改。此外，从 ItemView您可以决定传入可以操纵数据在其模板中显示方式的助手。
把它们放在一起
现在我们已经定义了模型、集合、 Collection View 、子项目 View 和项目 View 模板。接下来，我们将连接所有这些部分。
填充您的收藏
您将 stooges 数组传递给集合的构造函数。

var myStooges = new StoogeCollection(stooges);

这些被塑造成模型，并加载您的收藏。
提高您的 CollectionView您将加载的集合传递给 Collection View 。

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

渲染你的 View
所有 Marionette View 均随附 render方法。在我们的例子中，调用

myStoogesView.render();

将创建一个 <table>三个 <tr> name 的每个元素都有一个列, age , 和 userid我们数据集中的字段。要将生成的 HTML 插入 DOM，我们只需使用 View 的 el属性(property)。为简单起见，我们可以将 View 直接注入(inject)主体

document.body.appendChild(myStoogesView.el);

或使用 jQuery:

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

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