您能建议我一些通过木偶模板系统显示列表视图的示例吗?基本上,我有一个木偶模板,并基于该模板创建表格列表。

最佳答案

要使用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
});

设置您的视图
要将集合迭代并呈现到表中,只需要一个CollectionViewItemView
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,您可以在“行”级别处理事件,例如行列上的clickfocus。您还可以处理对传入模型的更改。此外,您可以从ItemView中决定传入帮助程序,该帮助程序可以操纵数据在其模板中的显示方式。
放在一起
现在,我们定义了模型,集合,集合视图,子项视图和项视图模板。接下来,我们将连接所有这些片段。
填充您的收藏
您将stooges数组传递给集合的构造函数。
var myStooges = new StoogeCollection(stooges);

它们被塑造成模型,并加载您的收藏。
提升您的CollectionView
您将已加载的集合传递到集合视图。
var myStoogesView = new StoogesCollectionView({ collection: myStooges  });

呈现您的视图
所有Marionette视图都带有render方法打包。在我们的情况下,调用
myStoogesView.render();

将创建一个包含三个<table>元素的<tr>,每个元素在我们的数据集中的nameageuserid字段各有一个列。要将结果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/

10-12 12:58
查看更多