我在理解在 Marionette 中进行递归的正确方法时遇到了一些麻烦。我已经看到了其他一些问题的答案，但我已将其分解为一个非常简单的示例，地址为 http://jsfiddle.net/vZY2v/ 。我知道 secret 在于复合 Material 的使用，但我还没有找到正确的方法。
我想生成 N 级嵌入列表，例如:
<ul>
<li>Bob</li>
<ul>
<li>Jim</li>
<li>Jane</li>
</ul>
</ul>
HTML 看起来像:
<body>
<div id='myContainer'></div>
<script type='text/template' id='my-item'>
<%= name %>
</script>
</body>
代码如下:
var jsonData = [{
name: 'Bob',
children: [{
name: 'Jim'
}, {
name: 'Jane'
}]
}, {
name: 'Sally',
children: [{
name: 'Sue',
children: [{
name: 'John'
}, {
name: 'Lisa'
}]
}]
}];
var Item = Backbone.Model.extend({});
var ItemCollection = Backbone.Collection.extend({
model: Item
});
var i = new Item();
var Manager = new Marionette.Application();
Manager.addRegions({
mainRegion: "#myContainer"
});
var RecursiveView = Marionette.CompositeView.extend({
tagName: "li",
template: '#my-item',
initialize: function () {
if (this.model.get('children')) {
this.collection = new ItemCollection(this.model.get('children'));
}
}
});
var MotherView = Marionette.CollectionView.extend({
tagName: "ul",
itemView: RecursiveView
});
var myColl = new ItemCollection(jsonData);
var x = new MotherView({
collection: myColl
});
Manager.mainRegion.show(x);
所需的输出如下:
- 鲍勃
- 吉姆
- 简
- 莎莉
- 苏
- 约翰
- 丽莎
- 苏
最佳答案
我想我可以在这里用更新的示例来回答我自己的问题 http://jsfiddle.net/nDfCT/1/ .
secret 是将 LI 标记移动到模板中，并用 a 渲染 RecursiveView，并添加如下所示的appendHtml 函数:
var RecursiveView = Marionette.CompositeView.extend({
tagName: "ul",
template: '#my-item',
initialize: function () {
this.collection = this.model.children;
},
appendHtml: function (collectionView, itemView) {
collectionView.$('li:first').append(itemView.el);
}
});
关于javascript - 主干 Marionette 递归列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21222355/