骨干牵线木偶复合视图渲染模板
我正在尝试使用Marionette CompositeView呈现列表。 我不确定为什么渲染列表只有一个显示单词result的项目。 我期待第一个项目显示Level 1 。
这是我当前代码的小提琴： http ： //jsfiddle.net/16L1hen4/
这是我的JS，模板和数据：
JavaScript的：
var App = new Backbone.Marionette.Application(); App.addRegions({ mainRegion: '#main' }); var TreeModel = Backbone.Model.extend({ }); var TreeCollection = Backbone.Collection.extend({ model: TreeModel, url: 'https://api.mongolab.com/api/1/databases/backbone-tree/collections/tree?apiKey=somekey' }); var TreeView = Backbone.Marionette.CompositeView.extend({ initialize: function() { console.log(this.collection); }, tagName: 'ul', template: _.template( $('#tree-template').html() ) }); var treeCollection = new TreeCollection(); treeCollection.fetch().done(function () { var treeView = new TreeView({collection: treeCollection}); App.mainRegion.show(treeView); });
模板：
JSON数据：
{ "_id": { "$oid": "54adab80e4b0aa674b256836" }, "name": "Level 1", "children": [ { "name": "Child 1 - Level 2", "children": [ { "name": "Jon - Level 3" }, { "name": "Mary - Level 3" } ] }, { "name": "Child 2 - Level 2", "children": [ { "name": "Bill - Level 3" } ] } ] }
您正在使用CompositeView来显示集合，但您需要定义一个childView来呈现模型
var LeafView = Backbone.Marionette.ItemView.extend({ // ... }); var TreeView = Backbone.Marionette.CollectionView.extend({ childView: LeafView })
这是一个更新的小提琴。 http://jsfiddle.net/6ok1rptq/
现在显示在html中的“结果”，不熟悉下划线源，我相信这是由于给予模板的data为空的事实，并且快速查看下划线源显示它正在使用with
http://underscorejs.org/docs/underscore.html#section-148
“如果未指定变量，请将数据值放在本地范围内。”
意味着模板找不到“名称”变量，而是在全局范围（ window ）中查找
结果只是包含小提琴结果的jsfiddle iframe的名称
阅读marrionnete docs更近一点 – 你需要一个childView定义….
我没有对此进行测试，但我认为错误在于你没有在CompositeView上定义Marionette Itemview。
逻辑结构是像在问题中一样将Compositeview传递给集合，模型将在单独的项目视图中呈现。
在项目视图中，您可以致电：
this.model.get("property");
从视图中访问属性。