EmberJS：呈现默认模板

Question

我正在尝试构建一个 Ember 应用程序，我想将嵌套路由的默认模板呈现到索引路由中。这是 router.js

export default Router.map(function() {
  this.route('posts', function() {
    this.route('featured');
    this.route('authors');
    this.route('popular');
  });
});

这是 posts-index.hbs 模板：

<div class="posts">
  <h2>Welcome to your blog posts</h2>
  <p>Here are your posts:</p>
  <ul>
    <li>{{#link-to 'posts.featured'}}Featured{{/link-to}}</li>
    <li>{{#link-to 'posts.authors'}}Authors{{/link-to}}</li>
    <li>{{#link-to 'posts.popular'}}Popular{{/link-to}}</li>
  </ul>
  <div class="posts-container">
    {{outlet}}
  </div>
</div>

这是 posts-index/featured.hbs 模板：

<div class="featured-posts">
  <h3>List of featured posts</h3>
  <p>...</p>
</div>

其他模板同featured模板。

正如您在上面的应用程序中看到的，我希望当用户访问 /posts 时，他们将看到 posts-index 模板，以及呈现为的 posts/featured.hbs 模板默认。当然，用户仍然可以导航到 url /posts/featured，并看到相同的内容。

对此有任何建议，我们将不胜感激。谢谢！

Answer 1

Ember Route 提供了一个 renderTemplate 钩子，你可以像这样使用它：

App.PostsIndexRoute = Em.Route.extend({

  renderTemplate: function() {
    // renders the template for the current route, as per conventions
    // in your case it will be 'posts/index' 
    this.render();

    // renders the named template 'posts/feature' *into* another named template
    this.render('posts/featured', {
      into: 'posts/index' // which in this case is 'posts/index'
    }); 
  }
});

（参见 JSBin）

EmberJS：呈现默认模板

EmberJS: Render default template

javascript

templates

handlebars.js

ember.js

ember-cli