Emberjs - ChildViews

by amindunited

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta6/handlebars.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://github.com/downloads/pangratz/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    +++++++
    {{outlet "navigation"}}
    +++++++++++++
</script>

<script type="text/x-handlebars" data-template-name="Nav">
    ________________
    <h1>Navigation</h1>
    ___________________
</script>
<script type="text/x-handlebars" data-template-name="Nav_button">
    <h1><a {{action foo this target="controller"}}>nav button {{title}}</a></h1>
</script>

CSS

a {
    cursor: pointer;
}

JavaScript

$(function(){
	//Bind Application name to window
    window.App = Em.Application.create({
        autoInit: false
    })
    
    //Create Application controller, view and router
    App.ApplicationController = Em.Controller.extend();
    App.ApplicationView = Em.View.extend({});
    App.router = Em.Router.create({
        enableLogging:true,
        location: 'none',
        root:Em.Route.extend({
            index:Em.Route.extend({
                route:'/',
                connectOutlets:function(router, context){
                    router.get('applicationController').connectOutlet('navigation', 'navigation');
                }, 
            })
        })
    });
    
    //Create an array of words to make buttons out of
    App.NavItemsInfo = [
        {title:"One"}, 
        {title:"Two"}, 
        {title:"Three"}, 
        {title:"Four"}
    ];
    
    //Create the Nav Button object that we will create many of
    App.NavigationButton = Em.Object.extend({
        id:null,
        name:null,
        text:null,
        title:null
    });
    App.NavigationButtonController = Em.Controller.extend({
        //model: App.NavigationButton.create(),
        //contentBinding: this.model.content,
        foo: function(){
            console.log("I pitty the foo");
        }
    })
    App.NavigationButtonView = Em.View.extend({
        templateName:"Nav_button",
        //controller:'App.NavigationButtonController'
    })
    
    //The Navigation Model will hold the array of buttons
    App.Navigation = Em.Object.create({
        
    });
    App.NavigationController = Em.Controller.extend({
        
    });
    App.NavigationView = Em.ContainerView.extend({
        templateName:'Nav',
        didInsertElement:function(){
            console.log("ok so the navigation view has been inserted");
            
            var self = this;
            
            $.each(App.NavItemsInfo, function(i, obj){
                var button =...