这个简单的 Ember 应用程序应该列出帖子。但是 Ember 不会呈现帖子模板。
JS:
App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.Router.map(function() {
this.resource('posts', function(){
this.resource('post', { path: '/:post_id'});
});
});
App.Post = DS.Model.extend({
title: DS.attr('string')
});
App.Post.FIXTURES = [
{ id: 1, title: "First post" },
{ id: 2, title: "Second post" },
{ id: 3, title: "Last post" },
];
App.PostsRoute = Ember.Route.extend({
model: function() {
return this.store.find('post');
}
});
HTML 正文标签:
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{#link-to 'posts'}}
posts
{{/link-to}}
</script>
<script type="text/x-handlebars" data-template-name="posts">
<h3>Posts list</h3>
<ul>
{{#each post in model}}
<li>
{{#link-to 'post' post}}
{{post.title}}
{{/link-to}}
</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="post">
Post #{{id}}: {{title}}
</script>
</body>
JSBin这个例子。
注意:如果我删除 posts 模板并访问 /#/posts/1 URL，Ember 将呈现 post 模板。
这段代码有什么问题？
最佳答案
如果将 {{outlet}} 添加到帖子模板，则将呈现帖子模板。
示例 1
但是，如果您不想嵌套模板，请将 posts 重命名为 posts/index。
示例 2
来自文档
http://emberjs.com/guides/routing/defining-your-routes/#toc_resources
有用的文章
http://ugisozols.com/blog/2013/11/05/understanding-nesting-in-emberjs/
示例 1 hbs
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{#link-to 'posts'}}
posts
{{/link-to}}
</script>
<script type="text/x-handlebars" data-template-name="posts">
<h3>Posts list</h3>
<ul>
{{#each post in model}}
<li>
{{#link-to 'post' post}}
{{post.title}}
{{/link-to}}
</li>
{{/each}}
</ul>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="post">
Post #{{id}}: {{title}}
</script>
例子2 hbs
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{#link-to 'posts'}}
posts
{{/link-to}}
</script>
<script type="text/x-handlebars" data-template-name="posts/index">
<h3>Posts list</h3>
<ul>
{{#each post in model}}
<li>
{{#link-to 'post' post}}
{{post.title}}
{{/link-to}}
</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="post">
Post #{{id}}: {{title}}
</script>
关于javascript - 为什么 Ember 不渲染子资源？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26186669/