您能建议我一些通过木偶模板系统显示列表视图的示例吗?基本上,我有一个木偶模板,并基于该模板创建表格列表。
最佳答案
要使用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
,该集合保存了填充每一行的模型。当我们使a 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
字段各有一个列。要将结果HTML插入DOM中,我们只需使用视图的el
属性。为简单起见,我们可以将视图直接注入体内document.body.appendChild(myStoogesView.el);
或使用jQuery:
$(document.body).append(myStoogesView.el);
除了这个例子
我们甚至没有开始讨论很多功能。阅读docs!并查看许多教程。希望这个简短的介绍对您有所帮助!
关于backbone.js - 使用 Marionette 模板的骨架.js集合 View 示例,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27673371/