Ember Routing

This really isn't about routing any more...navigation/menu

by amindunited

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<div class="megaNavWrap">
<script type="text/x-handlebars" data-template-name="application">
    <h1>Nav app</h1>
        {{#each MegaNav.navItemsController.content tagName="ul"}}
            {{#view MegaNav.NavItemsView contentBinding="this"}}      
                <li><a {{action updateContent this}}>{{text}}</a></li>            
            {{/view}}
        {{/each}}
    {{outlet magoo}}
</script>
</div>
<script type="text/x-handlebars" data-template-name="subnav">
    <hr/>
    {{#each MegaNav.subnavController.content tagName="ul"}}
        {{#view contentBinding="this"}}      
            <li><a {{action updateContent this}}>{{text}}</a></li>            
        {{/view}}
    {{/each}}
</script>

JavaScript

$(function(){
    MegaNav = Ember.Application.create({ autoinit:false });
    
    MegaNav.ApplicationController = Em.Controller.extend({});
    MegaNav.ApplicationView = Em.View.extend({});
    
    MegaNav.router = Em.Router.create({
        root: Em.Route.extend({
            index : Em.Route.extend({
                route: '/',
                enter : function(router) {
                    console.log("entered index");
                },
                updateContent : function( router, event){
                    MegaNav.navItemsController.updateContent(router, event);
                    router.transitionTo('subnav');
                },
                connectOutlets : function(router, context){
                    router.get('applicationController').connectOutlet('magoo', 'subnav');
                }
            }),
            subnav : Em.Route.extend({
                route: '/subnav',
                enter: function(){
                    console.log('subnav entered');
                },
                updateContent : function( router, event){
                    MegaNav.subnavController.updateContent(router, event);
                }
            })
        })
    })
    MegaNav.NavItems = Em.Object.extend({
        text:null
    })
    MegaNav.NavItemsView = Em.View.extend({
        fetchItems : function(){
            console.log("fletch me");
        },
      didInsertElement : function(){
        console.log("NavItem Inserted");
        console.log(this.$())
        }
    })
    MegaNav.navItemsController = Em.ArrayController.create({
        content:[{text:"Horses"},{text:"BBall"},{text:"Football"}],
        enter : function(){
            console.log("Entered Nav Items Controller");
        },
        updateContent : function(router, event){
            console.log(event.context);
            this.content.clear();
            this.content.pushObjects([{id:1, text:"Moo Cows"},{id:2, text:"Pool Noodles"},{id:3, text:"Corn Chips"}])
        }
   ...