使用木偶模板的骨架.js集合视图示例 [英] backbone.js collection view example using marionette template

问题描述

能否请您提出一些通过木偶模板系统显示列表视图的示例.基本上，我有一个木偶模板，并基于该模板创建表格列表.

Can you please suggest me some example for showing list view through marionette template system. Basically, I have a marionette template and based on the template i am creating a table list.

推荐答案

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

To create a list of table rows with Backbone Marionette you'll need to define five things:

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

• A model for each row
• A collection to hold all the row models
• A CollectionView to iterate through the collection
• An ItemView to provide row-specific functionality
• A template for the ItemView that provides the markup for each row

假设您有以下数据:

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

定义模型和集合

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

Define a model and collection

For the following data you'd want to have a model:

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

，您可以在其中为数据和其他属性(如idAttribute)设置一些合理的默认值.有关如何自定义模型的大量参考资料.您的收藏集至少应使用stoogeModel.

where you can set up some sensible defaults for your data and other properties, like idAttribute. There are plenty of references on how to customize your model. Your collection should, at minimum, take the 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，它是集合，其中包含填充每一行的模型.当我们将a stoogesCollectionView实例化时，我们将传递此集合. tagName属性告诉Backbone将子级封装在table标记中.

All CollectionViews need at minimum a childView which is an ItemView (which we define below) that they will use to derive the functionality to create the html for each row, and a collection which is the collection holding the models that populate each row. We'll pass this collection in when we instatiate astoogesCollectionView. The tagName property tells Backbone to encapsulate the children in a table tag.

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标记封装，因为我们想要的是集合视图中每个子视图的一行.

All ItemViews require a template which we define in our HTML document, here it's #stooge-template. If the ItemView is a child of a collection you don't have to define its model, it will be provided by the parent CollectionView. The HTML rendered by each child StoogeItemView will be encapsulated by tr tags, because what we want is a row for each child of the collection view.

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

From the ItemView you can handle events at the "row" level, like click or focus on a row column. You can also handle changes to the model that was passed in. Additionally, from the ItemView you could decide to pass in helpers that can manipulate the way data is displayed in its template.

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

Now we have defined our model, collection, collection view, child item view, and the item view template. Next, we'll connect all these pieces.

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

You pass in the array of stooges to the constructor of your collection.

var myStooges = new StoogeCollection(stooges);

这些被塑造成模型，并加载您的收藏集.

These are shaped into models, and they load your collection.

您将已加载的收藏集传递到收藏夹视图.

You pass your loaded collection to your collection view.

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

呈现您的视图

所有Marionette视图均使用render方法打包.在我们的例子中，调用

Render your view

All Marionette views come packaged with a render method. In our case, invoking

myStoogesView.render();

将创建一个包含三个<tr>元素的<table>，每个元素在我们的数据集中的name，age和userid字段各具有一列.要将结果HTML插入DOM中，我们只需使用视图的el属性.为简单起见，我们可以将视图直接注入体内

will create a <table> with three <tr> elements each with a column each for the name, age, and userid fields in our dataset. To insert the resulting HTML in the DOM we simply use the view's el property. For simplicty, we can inject the view straight into the body

document.body.appendChild(myStoogesView.el);

或使用jQuery:

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

超出此示例

有很多我们还没有开始讨论的功能.阅读文档！并查看许多教程.希望这个简短的介绍对您有所帮助！

Beyond this example

There is much functionality that we didn't even begin to discuss. Read the docs! And check out the many many tutorials. Hope this brief intro helps!

这篇关于使用木偶模板的骨架.js集合视图示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！