爲什麼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模板。

這段代碼有什麼問題？

來源

2014-10-03 Rodrigo

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

如果{{outlet}}被添加到帖子模板，那麼帖子模板將被渲染。

例如1

http://jsbin.com/yepica/1

但是，如果你不希望被嵌套在模板然後重命名posts到posts/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>

來源

2014-10-03 21:40:57 melc

爲什麼Ember不呈現子資源？

回答

相關問題