Emberjs - Creating multiple New Views

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">
    {{#each button in controller.buttons tagName="ul"}}
    	{{#with button}}
    		<li class="buttons" {{action beenClickedC button target="controller"}}>-- {{button.id}}-{{button.display_name}} --</li>
    	{{/with}}
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="collection">
    <li {{action foo target="controller"}}>I'm a collection </li>
</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 = ["One", "Two", "Three", "Four"];
    
    //Create the Nav Button object that we will create many of
    App.NavigationButton = Em.Object.extend({
        id:null,
        name:null,
        text:null
    });
    
    //The Navigation Model will hold the array of buttons
    App.Navigation = Em.Object.create({
        buttons: Em.A()
    });
    
    //The Navigation Controller will create the buttons
    App.NavigationController = Em.Controller.extend({
        buttonsBinding:'App.Navigation.buttons',
        
        init: function(){
            console.log("I am ", this);
            
            var self = this;
            
            $.each(App.NavItemsInfo, function(i, obj){
                console.log("each ", i, obj);
                
                self.buttons.pushObject(App.NavigationButton.create({
                    display_name:obj,
                    text:obj,
                    id:i
                }));
            });
            
            console.log("Navigation Has ", this.buttons);
            
        },
        beenClickedC:function(){
        	console.log("been click controller addition");
        }
    });
    
    //Create a nav view and assign it the template
    App.NavigationView =...