我不知道为什么我的模板没有在指定的插座中呈现。这是我第一次尝试学习 ember,我被困在指定的渠道上。
我想渲染侧边栏模板 in the {{outlet "sidebar"}}
和内容模板 in the {{outlet "content"}}
但我不断在控制台中收到以下错误:“处理路由时出错:帖子无法读取未定义的属性“connectOutlet”TypeError:无法读取未定义的属性“connectOutlet””
这是我的代码的一个小提琴:http://jsfiddle.net/va71wwr9/ http://jsfiddle.net/va71wwr9/
这是我的 HTML:
<script type="text/x-handlebars">
<div class="nav-container">
<ul class="nav">
<li>{{#link-to 'home'}}Home{{/link-to}}</li>
<li>{{#link-to 'posts'}}Posts{{/link-to}}</li>
</ul>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="home">
<h1>Home screen</h1>
</script>
<script type="text/x-handlebars" id="posts">
<h1>Posts screen</h1>
<div class="sidebar-container">
{{outlet sidebar}}
</div>
<div class="content-container">
{{outlet content}}
</div>
</script>
<script type="text/x-handlebars" id="sidebarTemplate">
<p>Side bar stuff</p>
</script>
<script type="text/x-handlebars" id="contentTemplate">
<p>content stuff</p>
</script>
这是我的 JavaScript:
var App = Ember.Application.create();
App.Router.map(function() {
this.resource('home', {path: '/'});
this.resource('home', {path: 'home'});
this.resource('posts', {path: 'posts'});
});
App.PostsRoute = Ember.Route.extend({
renderTemplate: function() {
this.render('sidebarTemplate', {
into: 'posts',
outlet: 'sidebar'
});
this.render('contentTemplate', {
into: 'posts',
outlet: 'content'
});
}
});
问题是你没有渲染posts
模板。您可以通过添加来修复此问题this.render()
or this._super()
在定义您所在路线的出口模板之前进行渲染:
App.PostsRoute = Ember.Route.extend({
renderTemplate: function() {
// add this line
this._super();
this.render('sidebarTemplate', {
into: 'posts',
outlet: 'sidebar'
});
this.render('contentTemplate', {
into: 'posts',
outlet: 'content'
});
}
});
关于扩展功能只有一点注释;在此特定代码中,调用this._super()
would 技术上与调用相同this.render()
,但不同之处在于通过调用_super()
你正在延长renderTemplate
通过将您的内容附加到该方法本身将执行的操作(在本例中将被调用)来实现功能this.render()
也许这个方法可能需要执行另一个例程(一般来说,不排除renderTemplate
),而如果您自己调用执行您想要的操作的方法,在这种情况下render
方法,您将从流程中排除该方法的其他内容could履行。这没有对错之分。这实际上取决于您想要实现的目标。对于大多数情况,您应该致电this._super()
如果您扩展的方法做了不止一件事和/或将来要做不止一件事,而不是再次重写实现。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)