[英]Backbone Marionette Composite View Rendering Template
I'm trying to render a list with a Marionette CompositeView. 我正在尝试使用Marionette CompositeView呈现列表。 I am not sure why the rendered list just has an item displaying the word
result
. 我不确定为什么渲染的列表中只有一个显示单词
result
的项目。 I was expecting the first item to display Level 1
. 我期望第一个项目显示
Level 1
。
Here is a fiddle to my current code: http://jsfiddle.net/16L1hen4/ 这是我当前代码的小提琴: http : //jsfiddle.net/16L1hen4/
Here is my JS, template, and data: 这是我的JS,模板和数据:
JavaScript: 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);
});
Template: 模板:
<div id="main"></div>
<script type="text/template" id="tree-template">
<li><%- name %></li>
</script>
JSON Data: 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"
}
]
}
]
}
仔细阅读marrionnete文档-您需要定义一个childView。
I didn't test this, but I assume that the error lies with the fact that you didn't define a Marionette Itemview on the CompositeView. 我没有对此进行测试,但是我认为错误在于您没有在CompositeView上定义Marionette Itemview。
The logical structure is to pass the Compositeview a collection as you did in the question, and the models will be rendered in separate itemviews. 逻辑结构是像您在问题中所做的那样,将Compositeview传递给集合,并且模型将在单独的itemview中呈现。
In the itemview you can call: 在itemview中,您可以调用:
this.model.get("property");
To access the properties from within the view. 从视图中访问属性。
You are using a CompositeView to display a Collection, but you need to define a childView
to render the models 您正在使用CompositeView显示Collection,但是您需要定义
childView
来呈现模型
var LeafView = Backbone.Marionette.ItemView.extend({
// ...
});
var TreeView = Backbone.Marionette.CollectionView.extend({
childView: LeafView
})
here is an updated fiddle. 这是更新的小提琴。 http://jsfiddle.net/6ok1rptq/
http://jsfiddle.net/6ok1rptq/
Now the "result" showing in the html, without being familiar with the underscore source, I believe this is caused by the fact that the data
given to the template is null, and a quick look at the source of underscore shows that it is using with
现在,在html中显示的“结果”,而不熟悉下划线的来源,我相信这是由于以下事实造成的:给模板的
data
为空,而快速查看下划线的来源则表明它正在使用with
http://underscorejs.org/docs/underscore.html#section-148 http://underscorejs.org/docs/underscore.html#section-148
"If a variable is not specified, place data values in local scope." “如果未指定变量,则将数据值放在本地范围内。”
Meaning that the template can't find a "name" variable, and will instead look it up in the global scope ( window
) 意味着模板找不到“名称”变量,而是在全局范围(
window
)中查找它
Result is just the name of the jsfiddle iframe containing the result of the fiddle 结果只是包含小提琴结果的jsfiddle iframe的名称
<iframe name="result" ...>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.