为什么Ember不呈现子资源?
问题描述:
这个简单的Ember应用程序应该列出帖子。但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,灰烬呈现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>
看http://*.com/questions/25817621/emberjs -complex路由/ 25823132#25823 132,情况可能如此。 – Microfed 2014-10-03 21:31:36