How can I build a recursive view in Ember?

Question

In my application I have an item called block which can contain and be contained by other block items. To keep things simple, lets say these blocks can be infinitely nested.

I want to know if I can create recursive views corresponding to the blocks that are also nested. Each view will be rendered as a DIV containing its children and residing inside its parent DIV?

While the views are similar in terms of what they can contain, their actual content that will be obtained from the server can be different. Here is an example data:

App.blocks.set('content',[
    Em.Object.create({title:"One", id:"1", is_inside:"0"}),
    Em.Object.create({title:"Two", id:"2", is_inside:"1"}),
    Em.Object.create({title:"Three", id:"3", is_inside:"0"}),
    Em.Object.create({title:"Four", id:"4", is_inside:"3"}),
    Em.Object.create({title:"Five", id:"5", is_inside:"4"})
])

In this example, block one would be rendered as root (assume 0 is root which means not inside any other block). Block two would be rendered inside block one and so on.

I noticed a similar question has been asked a while ago, but I am not satisfied with the answer there. I feel there must be an elegant way to achieve this in Ember.

Can you point me to an example of how this can be done in Ember? If not, any advice that could help me make progress and refine my question would also be very appreciated.

Edit: Here is a jsFiddle that I made with some initial data that we could use as starting point. With your help hopefully I can make those DIVs nested based on their is_inside relation. I have updated the post to use this simpler example.

Answer 1

Take this as a hint, I think the layout property of Ember.Viewcomes in rescue...It works this way

App.myView =  Ember.View.extend({
  layoutName: "parent",
  templateName: "child"
})

<script type="text/handlebars" data-template-name="parent">
  Who's your Daddy ??<br> {{yield}} <br> ######
</script>


<script type="text/handlebars" data-template-name="child">
  I'm your son !
</script>

Will result in the following html

<div id="ember1" class="ember-view">
  Who's your Daddy?
  <div id="ember-2" class="ember-view">
    I'm your son !
  </div>
  ######
</div>

Model your data first, then use for or while loops in js to create views, I don't think using handlebar helpers for recursion is a good idea.

Edited Section There can be a better way than this...but check this out, and here you are not limiting the nesting to one level, right ?

App.MainView = Ember.View.extend({
  templateName: "main"
})

App.View1 = Ember.View.extend({
  id: 1,
  templateName: "view1",
  parentId: "main"
})


App.View2 = Ember.View.extend({
  id: 2,
  templateName: "view2",
  parentId: 1
})


App.View3 = Ember.View.extend({
  id: 3,
  templateName: "view3",
  parentId: 1
})


App.View4 = Ember.View.extend({
  id: 4,
  templateName: "view4",
  parentId: 3
})

App.View5 = Ember.View.extend({
  id: 5,
  templateName: "view5",
  parentId: "main"
})

App.viewArray = [App.View1, App.View2, App.View3, App.View4, App.View5];

App.viewArray.forEach(view, function(){
  parentView = App.viewArray.findProperty("id", view.get('parentId'))
  view.set("layoutName", parentView.get('templateName'))
})