为什么Ember不渲染子资源？

Question

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

此代码有什么问题？

Answer 1

如果将{{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>

为什么Ember不渲染子资源？

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-10-03 21:40:57

为什么Ember不渲染子资源？

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-10-03 21:40:57

解决方案1
2 已采纳 2014-10-03 21:40:57