how to build nested views in emberjs - ember.js

Question

I'm trying to learn ember and to understand all concepts. I'm stucked now for a couple of days.
I tried to create a view with multiple "subviews" (is there a name for it in ember?). For example:
+-----------------------------------------------+------------------+
| 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 | |
| | |
+-----------------------------------------------+------------------+
My idea is to have a PostController with its own route to show details for a selected post. Adding nested elements for comments and widgets (with {{#each}}) is easy. This means I need to handle all actions and everything else for my nested elements in my PostController which smells bad and becomes messy.
Shouldn't be each of them (comments, tags and related) a separate controller? In this case I could keep my PostController clean and handle all nested action in its own controller. Is this the right way or has ember better ways to do it?
If yes, how can I implement these nested views. I read many topics around nested views in ember but I can't figure out its concepts. I would say, I don't need routes for tags and comments because its bound to a PostController and they are never used without a post, but I'm not sure.
After reading this post, I tried to use render but I don't understand the concept which controller and view is used in this case.
Is there maybe a good (updated) guide which I just missed or could someone please explain me how this could work or guide me in the right direction?

Answer 1

You can create separated views by Em.View.create,
then insert to post template with {{view}} for comments & tags.
Templates:
<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>
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);
}
});