Nested DIVs in Ember 0.9.6

This is an example showing how recursion using handlebars can be used to display nested models using a single views.

by Aras Balali Moghaddam

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.8.1.js"></script>
<script type="text/x-handlebars" data-template-name="blocki-template" >
        {{blocki.menuTitle}}
        {{#each blocki.children}}
            {{view App.Block blockiBinding="this"}}
        {{/each}}
</script>

<script type="text/x-handlebars">
    {{view App.Block blockiBinding="App.data" }}
</script>

CSS

.blocks-container {
  width: 30em;
  height: 30em;
  border:2px solid #566789;
  box-shadow: 2px 2px 19px #aaa;
  -o-box-shadow: 2px 2px 19px #aaa;
  -webkit-box-shadow: 2px 2px 19px #aaa;
  -moz-box-shadow: 2px 2px 19px #aaa;
  -moz-border-radius:0.5em;
  border-radius:0.5em;
  opacity:0.7;
  filter:alpha(opacity=80);
  margin: 0.5em;
}

.block { 
    display: block;
    float: left;
    border:1px solid #779989;
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius:0.5em;
    border-radius:0.5em;
    opacity:0.8;
    filter:alpha(opacity=80);
    line-height:5em;
    text-align:center;
    z-index:20; 
    background-color:#FFC000;
    color:black;
    font-family:helvetica;
    padding:0.5em;
    margin: 0.5em;
    font-size:0.9em;
}

JavaScript

App = Ember.Application.create({});

App.Block = Em.View.extend({
    tagName: 'div',
    classNames: ['block'],
    templateName: 'blocki-template',
    
    click: function(event){     
      // will be called when when an instance's     
      // rendered element is clicked 
        console.log("element clicked: " + this.get('elementId') );
    }   
});

App.data = {
    menuTitle: 'main page',
    children: [{
        menuTitle: 'Block 1',
        children: [{
            menuTitle: 'Block 1.1'
        },
        {
            menuTitle: 'Block 1.2'
        }]
    }, {
            menuTitle: 'Block 2',
        children: [{
            menuTitle: 'Block 2.1',
            children: [{
                menuTitle: 'Block 2.1.1',
                    children: [{
                       menuTitle: 'Block 2.1.1.1'
                    }]
               }]
        }]
    }]
};