[英]EmberJS: Render default template
I am trying to build an Ember Application which I want to render a default template of the nested route into the index route. 我正在尝试构建一个Ember应用程序,我想将嵌套路由的默认模板呈现到索引路由中。 Here is the
router.js
这是
router.js
export default Router.map(function() {
this.route('posts', function() {
this.route('featured');
this.route('authors');
this.route('popular');
});
});
Here is the posts-index.hbs
template: 这是
posts-index.hbs
模板:
<div class="posts">
<h2>Welcome to your blog posts</h2>
<p>Here are your posts:</p>
<ul>
<li>{{#link-to 'posts.featured'}}Featured{{/link-to}}</li>
<li>{{#link-to 'posts.authors'}}Authors{{/link-to}}</li>
<li>{{#link-to 'posts.popular'}}Popular{{/link-to}}</li>
</ul>
<div class="posts-container">
{{outlet}}
</div>
</div>
Here is the posts-index/featured.hbs
template: 这是
posts-index/featured.hbs
模板:
<div class="featured-posts">
<h3>List of featured posts</h3>
<p>...</p>
</div>
Other templates are the same as the featured
template. 其他模板与
featured
模板相同。
As you can see in the application above, I want when user visits the /posts
, they will see the posts-index
template, as well as the posts/featured.hbs
template being rendered as default. 如您在上面的应用程序中所看到的,我希望当用户访问
/posts
,他们将看到posts-index
模板,以及posts/featured.hbs
模板作为默认呈现。 Of course, user can still navigate to url /posts/featured
, and seeing the same content. 当然,用户仍然可以导航到url
/posts/featured
,并看到相同的内容。
Any suggestions to this are appreciated. 任何建议对此表示赞赏。 Thanks!
谢谢!
Ember Route
provides a renderTemplate
hook which you can use like this: Ember
Route
提供了renderTemplate
挂钩,您可以像这样使用它:
App.PostsIndexRoute = Em.Route.extend({
renderTemplate: function() {
// renders the template for the current route, as per conventions
// in your case it will be 'posts/index'
this.render();
// renders the named template 'posts/feature' *into* another named template
this.render('posts/featured', {
into: 'posts/index' // which in this case is 'posts/index'
});
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.