Ember MegaNav v 006

MegaNav View Switching w Out url and routing

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>
<script type="text/x-handlebars" data-template-name="application">
    <h1>I'm the start of the application template</h1>
    {{outlet megaNav}}
</script>
<script type="text/x-handlebars" data-template-name="MegaNavTemplate">
    <h1>MegaNav wrap</h1>
    {{outlet megaNavHeader}}
    {{outlet megaNavBody}}
    {{outlet megaNavFooter}}
</script>

<script type="text/x-handlebars" data-template-name="MegaNavHeaderTemplate">
    {{outlet megaNavHeaderCategories}}
</script>
<script type="text/x-handlebars" data-template-name="MegaNavBodyTemplate">
    {{outlet megaNavBodyGroupsNav}}
    {{outlet megaNavBodySubNav}}
    {{outlet megaNavBodyEventsList}}
</script>
<script type="text/x-handlebars" data-template-name="MegaNavFooterTemplate">
    <hr/>
    <h1>Footer</h1>
    <hr/>
</script>



<div id="appWrap">
    <div id="MegaNavWrap"></div>
    <div id="middle">I'm all the stuff in the middle of the page</div>
    <div id="bottomWrap"></div>
</div>

JavaScript

$(function(){
    window.MyApp = Em.Application.create({
        rootElement:'#appWrap',
        templateName: "applicaton",
        autoInit: false
    })
    MyApp.ApplicationController = Em.Controller.extend();
    MyApp.ApplicationView = Em.View.extend()
    MyApp.router = Em.Router.create({
        enableLogging: true,
        root: Em.Route.extend({
            index: Em.Route.extend({
                route:'/',
                enter:function(){                  
                    MyApp.MegaNavView.create().appendTo('#MegaNavWrap');
                },
                connectOutlets:function(router, context){
                    router.get('applicationController').connectOutlet('megaNav', 'MegaNav')
                }
            })        
        })
    })
    
    MyApp.MegaNavView = Em.View.extend({
        templateName: 'MegaNavTemplate'
    }) 
        
    MyApp.initialize(MyApp.router);   
    
})