ember.js - 如何在 emberjs 中构建嵌套 View

Question

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

我尝试创建一个具有多个“ subview ”的 View (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 来显示所选帖子的详细信息。添加注释和小部件的嵌套元素(使用 {{#each}})很容易。这意味着我需要处理 PostController 中嵌套元素的所有操作和其他所有内容，这闻起来很糟糕并且变得困惑。

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

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

阅读后this post ，我尝试使用渲染，但我不明白在这种情况下使用 Controller 和 View 的概念。

是否有一个我刚刚错过的好的(更新的)指南，或者有人可以向我解释一下这是如何工作的或引导我走向正确的方向？

Answer 1

您可以通过Em.View.create创建单独的 View ，
然后使用 {{view}} 插入 post 模板以获取评论和标签。

模板:

<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);
  }
});