如何在 emberjs 中构建嵌套视图

Question

我正在努力学习 ember 并理解所有概念。我现在被困了几天。

我尝试创建一个包含多个“子视图”的视图（在 ember 中有名称吗？）。例如：

+-----------------------------------------------+------------------+
| Post title                                    | new tag: ______  |
+-----------------------------------------------+                  |
| Post text                                     | * tag 1          |
|                                               | * tag 2          |
|                                               |                  |
+-----------------------------------------------+------------------+
| New comment: _____________ submit             | related posts    |
|                                               |                  |
| * comment 1 text                              | * post 1         |
| * comment 2 text                              | * post 2         |
| * comment 3 text                              |                  |
| * comment 4 text                              |                  |
| * comment 5 text                              |                  |
|                                               |                  |
+-----------------------------------------------+------------------+

我的想法是让 PostController 有自己的路由来显示所选帖子的详细信息。为 cmets 和小部件添加嵌套元素（使用 {{#each}}）很容易。这意味着我需要为我的 PostController 中的嵌套元素处理所有操作和其他所有事情，这些元素闻起来很糟糕并且变得凌乱。

不应该是每个人（cmets、标签和相关的）separate controller？在这种情况下，我可以保持我的 PostController 干净并在它自己的控制器中处理所有嵌套操作。这是正确的方法还是有更好的方法来做到这一点？

如果是，我该如何实现这些嵌套视图。我在 ember 中阅读了许多有关嵌套视图的主题，但我无法弄清楚它的概念。我会说，我不需要标签和 cmets 的路由，因为它绑定到 PostController 并且在没有帖子的情况下永远不会使用它们，但我不确定。

阅读this post 后，我尝试使用渲染，但我不明白在这种情况下使用哪个控制器和视图的概念。

是否有我刚刚错过的好的（更新的）指南，或者有人可以解释一下这如何工作或指导我朝着正确的方向前进吗？

Answer 1

您可以通过Em.View.create创建分离视图，
然后插入到 post 模板和 {{view}} 用于 cmets 和标签。

模板：

<script type='text/x-handlebars' data-template-name='post'>
<div class='post'>
  <h1>{{title}}</h1>
  <div class='content'>{{{content}}}</div>
  <div class='tags'>{{view App.TagView}}</div>
  <div class='comments'>{{view App.CommentView}}</div>
  <div class='relatedPosts'>{{view App.RelatedPostView}}</div>
</div>
</script>

<script type='text/x-handlebars' data-template-name='comment'>
{{#each view.comments}}
  <!--some HTML codes for comments-->
{{/each}}
</script>

脚本：

App.CommentView = Em.View.create({
  templateName:'comment',
  comments:[],
  didInsertElement: function(){
    // Handler related to this view has to implement here
    // as there are delays for inserting elements
  }
});

App.PostController = Em.ArrayController.extend({
  getContent: function(){
    //some codes for loading content

    //You can implement all methods in single controller
    this.addComments(data.comments);

    //Or call other methods after loaded the content
    App.commentController.setup(data.comments);
  },
  addComments: function(data){
    App.CommentView.set('comments',data);
  }
});