我只是查看了ember.js(rc7)并尝试构建一个包含多个出口的示例。
的index.html
<html>
// ... head and other meta definitions
<body>
<script type="text/x-handlebars" data-template-name="index">
<p>Hello Index!</p>
</script>
<script type="text/x-handlebars" data-template-name="products">
{{outlet header}}
<p>Hello Products 22!</p>
{{outlet footer}}
</script>
<script type="text/x-handlebars" data-template-name="header">
<p>Header</p>
</script>
<script type="text/x-handlebars" data-template-name="footer">
<p>Footer</p>
</script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript" src="js/handlebars.js/handlebars-1.0.0.js"></script>
<script type="text/javascript" src="js/ember.js/ember-1.0.0-rc.7.js"></script>
<script type="text/javascript" src="js/application.js"></script>
</body>
</html>
的application.js
window.App = Ember.Application.create();
App.Router.map(function () {
this.resource('products');
});
App.ProductsRoute = Ember.Route.extend({
renderTemplate: function () {
this.render('header', {
outlet: 'header',
into: 'products'
});
this.render('footer', {
outlet: 'footer',
into: 'products'
});
}
});
不幸的是,在运行此代码时,javascript控制台会从ember.js中输出错误:加载路径时出错:TypeError {}。
来自Google控制台的Stacktrace:
DEBUG: ------------------------------- ember-1.0.0-rc.7.js:364
DEBUG: Ember.VERSION : 1.0.0-rc.7 ember-1.0.0-rc.7.js:364
DEBUG: Handlebars.VERSION : 1.0.0 ember-1.0.0-rc.7.js:364
DEBUG: jQuery.VERSION : 1.10.0 ember-1.0.0-rc.7.js:364
DEBUG: ------------------------------- ember-1.0.0-rc.7.js:364
Error while loading route: TypeError {} ember-1.0.0-rc.7.js:364
(anonymous function) ember-1.0.0-rc.7.js:364
Ember.Router.reopenClass._defaultErrorHandler ember-1.0.0-rc.7.js:26567
trigger ember-1.0.0-rc.7.js:25709
handlerEnteredOrUpdated ember-1.0.0-rc.7.js:25591
handler ember-1.0.0-rc.7.js:25566
eachHandler ember-1.0.0-rc.7.js:25613
setupContexts ember-1.0.0-rc.7.js:25565
finalizeTransition ember-1.0.0-rc.7.js:25886
transitionSuccess ember-1.0.0-rc.7.js:25781
invokeCallback ember-1.0.0-rc.7.js:7271
Promise.then ember-1.0.0-rc.7.js:7321
EventTarget.trigger ember-1.0.0-rc.7.js:7094
config.async.promise.trigger.detail ember-1.0.0-rc.7.js:7384
DeferredActionQueues.flush ember-1.0.0-rc.7.js:4744
Backburner.end ember-1.0.0-rc.7.js:4830
Backburner.run ember-1.0.0-rc.7.js:4869
Ember.run ember-1.0.0-rc.7.js:5200
Ember.Application.Ember.Namespace.extend.scheduleInitialize ember-1.0.0-rc.7.js:29937
x.Callbacks.c jquery.js:3064
x.Callbacks.p.fireWith jquery.js:3176
x.extend.ready jquery.js:433
q jquery.js:104
我很确定我搞砸了什么,所以任何提示都会受到赞赏。谢谢!
亨利
答案 0 :(得分:2)
我想您必须在super
中添加对renderTemplate
的调用,否则系列模板将无法渲染,您想要渲染到其中: - )
App.ProductsRoute = Ember.Route.extend({
renderTemplate: function (controller, context) {
this._super(controller, context);
this.render('header', {
outlet: 'header',
into: 'products'
});
this.render('footer', {
outlet: 'footer',
into: 'products'
});
}
});
答案 1 :(得分:1)
我认为 mavilein 提供了解决方案。
这里的问题是我们没有在一开始就渲染父模板。
我们也可以做到以下几点。
App.ProductsRoute = Ember.Route.extend({
renderTemplate: function () {
this.render('products');
this.render('header', {
outlet: 'header',
into: 'products'
});
this.render('footer', {
outlet: 'footer',
into: 'products'
});
}
});
答案 2 :(得分:0)
跳出来的一件事是你错过了应用程序模板,这是应用程序的主要布局。不确定它是否会修复错误,但它可能就是这样:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
答案 3 :(得分:0)
对于所有答案,有一件事要添加难度,在您的路由器地图中,您必须定义products
路线位于/
,因为它接缝您不关心索引模板:
App.Router.map(function () {
this.resource('products', {path: '/'});
});
查看演示here。
希望它有所帮助。