2014-10-03 103 views
1

这个简单的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模板。

这段代码有什么问题?

+0

看http://stackoverflow.com/questions/25817621/emberjs -complex路由/ 25823132#25823 132,情况可能如此。 – Microfed 2014-10-03 21:31:36

回答

2

如果{{outlet}}被添加到帖子模板,那么帖子模板将被渲染。

例如1

http://jsbin.com/yepica/1

但是,如果你不希望被嵌套在模板然后重命名postsposts/index

例2

http://jsbin.com/wedufo/1


从文档

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>