2

我正在尝试学习 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 有自己的路由来显示所选帖子的详细信息。为评论和小部件添加嵌套元素（使用{{#each}}）很容易。这意味着我需要为我的 PostController 中的嵌套元素处理所有动作和其他所有事情，这些元素闻起来很糟糕并且变得凌乱。

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

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

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

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

4

1 回答 1

2

您可以通过创建分隔视图Em.View.create，
然后插入到带有注释和标签的post模板。{{view}}

模板：

<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);
  }
});
于 2013-04-14T16:04:03.410 回答