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模板。当然，用户仍然可以导航到网址/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：渲染默认模板

1 个答案: