如何让template
或partial
包含查看数据?我正在使用Ember,车把和requireJS。目前,我发现只有outlets
包含视图数据。我正在尝试在模板中显示模型的属性。具体来说,我正在尝试在numberFive
中显示GraphData
模型的graphHolderTemplate
属性。在插座上使用并不理想,因为我想在同一页面上显示来自不同视图的模板,无论页面的URL如何。
ApplicationView:
define(['ember', 'text!templates/applicationTemplate.html'],
function(Em, applicationTemplate) {
var ApplicationView = Em.View.extend({
// warning: template doesn't work here, even though defaultTemplate does.
defaultTemplate: Em.Handlebars.compile(applicationTemplate),
});
return ApplicationView;
});
applicationTemplate:
<h1>{{#linkTo 'graph'}}Graph{{/linkTo}}</h1>
<h2>{{#linkTo 'graphHolder'}}Graph Holder{{/linkTo}}</h2>
<h4>outlet</h4>
{{outlet}}
<h4>template graphHolder</h4>
{{template graphHolder}}
<h4>partial graphHolder</h4>
{{partial 'graphHolder'}}
graphholderTemplate:
<h3>This is the graphHolder</h3>
<p>view.graphData.numberFive is: {{view.graphData.numberFive}}</p>
GraphHolderView:
define([ 'text!templates/graphHolderTemplate.html',
'controllers/GraphController',
'models/GraphData',
'ember',
], function(graphHolderTemplate, GraphController, GraphData, Em) {
// This is all that sets the template. hmmm
Em.TEMPLATES['graphHolder'] = Em.Handlebars.compile(graphHolderTemplate);
var graphData = GraphData.create();
console.log("graphData.numberFive is ": graphData.numberFive);
var GraphHolderView = Em.View.extend({
controller: GraphController,
classNames: ['hero-unit'],
graphData: GraphData.create(),
});
return GraphHolderView;
});
答案 0 :(得分:2)
很确定这是因为拼写错误:
var garphData = GraphData.create();
应为var graphData = GraphData.create();
view
不是您所期望的 - 我认为它将引用ApplicationView
。确保,请尝试将以下内容添加到模板中:
<h3>This is the graphHolder</h3>
<p>view.graphData.numberFive is: {{view.graphData.numberFive}}</p>
<p>view is: {{view}}</p>
{{log view}}
这应该将view.toString()
打印到页面和控制台。如果要进一步检查元素,请尝试将{{debugger}}
添加到模板,然后使用js控制台查看正在进行的操作。
无论如何,当您使用{{outlet}}
帮助程序时,ember-router将根据您当前的路由和上下文填写相应的模板。如果找到一个,它会将模板包装在匹配的View
类中。
与{{outlet}}
和{{render}}
不同,{{partial}}
和{{template}}
把手助手直接使用当前上下文渲染模板。这意味着他们不会尝试将模板包装在匹配的view
类中。
这里你可能想要使用的是{{render}}
助手。它将使用同名控制器的单例实例在当前上下文中呈现命名模板。如果存在具有相同名称的视图类,则它使用视图类。