Nested Routing with Emberjs rc4

by amindunited

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.4/ember.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{render cheese}}
</script>
<script type="text/x-handlebars" data-template-name="cheese">
    I'm cheese...{{controller.type}}
</script>

CSS

html, body {
    font-size: 9pt;
}
h1 {
    font-size: 18pt;
}
h2 {
    font-size: 12pt;
}

JavaScript

window.App = Em.Application.create();
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend();

App.Cheese = Em.Object.extend({
    content: ["grrrrrrrr"],
    type:"!!!!"
})
App.CheeseController = Em.Controller.extend({
    contentBinding: "App.Cheese.content",
    typeBinding : "App.Cheese.type"    
})
App.CheeseView = Em.View.extend({
    templateName: "cheese",
    didInsertElement: function(){
        this.$().css({"background":"yellow"})
    } 
})

App.jCheese = App.Cheese.extend({
    type : "Jarlsberg"
})