Emberjs - OneToManyViews

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>
    ________________
    {{#each dot in controller.content}}
        {{#with dot}}
             {{dot}}
        {{/with}}
    {{/each}}
    {{view App.NavItemsContainer elementId="nav_items_container"}}
</script>

<script type="text/x-handlebars" data-template-name="NavItem">
    --{{outlet}}--
</script>
<script type="text/x-handlebars" data-template-name="item">
    <a {{action testCall this target="controller"}}>!-{{this.text}}-!</a>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="foo">
    <h2><a {{action testCall this target="controller"}}>I am A foo<a/></h2>
</script>
<script type="text/x-handlebars" data-template-name="fooWrap">
    <h3><a {{action trace this target="controller"}}>----</a></h3>
</script>

CSS

a {
    cursor: pointer;
}
.foo {
    color:red;
}

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');
                }, 
            })
        })
    });
    
    App.NavItemsContainer = Em.ContainerView.extend()
    
    App.NavItemController = Em.Controller.extend({
        
        testCall:function(){
            console.log("success", this.target );
            /*
            var view = App.FooView.create();
            var cont = App.FooController.create();
            var model = App.Foo.create();
            view.reopen({
                controller:cont
            })
            cont.reopen({
                target:model
            })
            */
            this.connectOutlet('App.FooContianer')
        }
    })
    App.NavItemView = Em.View.extend({
        templateName:"item"
    })
    App.NavItem = Em.Object.extend({})
    
    App.FooContianer = Em.Object.extend({});
    //App.FooContianerController
    App.FooContianerView = Em.View.extend({
        templateName:'fooWrap',
        trace:function(){
            console.log("trace");
        }
    })
    
    App.FooController = Em.Controller.extend({
        testCall:function(){
            console.log("success", this.target );
        }
    })
    App.Foo = Em.Object.extend({})
    App.FooView = Em.View.extend({
        templateName:"foo"
    })
    
    
    
    
    App.NavItems = Em.Object.create({
        content:[
            {text:"one"},
            {text:"two"},
          ...