Ember Recursive View Example

Here is my attempt at making a recursive view in ember, its not there yet.

by Aras Balali Moghaddam

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.pre.min.js"></script>
<div class='blocks-container'>
  <script type="text/x-handlebars">
    {{view App.RecursiveView}}
  </script>
</div>

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

CoffeeScript

window.App = Ember.Application.create()
window.App.initialize()

App.Block = Em.View.extend
  classNames: 'block'
  tagName: 'div'

  didInsertElement: () ->
    console.log "block inserted"
    
  template: Ember.Handlebars.compile("~~ {{view.content.title}} ~~")

App.blocks = Em.ArrayController.create()

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"})
  ])
  
App.RecursiveView = Em.CollectionView.extend
  contentBinding: 'App.blocks'
  itemViewClass: 'App.Block'