Xmote - with Emberjs

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"}}
    
    {{outlet "body"}}
    {{outlet "footer"}}
</script>
<script type="text/x-handlebars" data-template-name="navigation">
    {{#each item in controller.content }}
        {{#with item}}
        <li><a>{{item.name}}</a></li>
        {{/with}}
    {{/each}}
</script>
<script type="text/x-handlebars" data-template-name="body">
    {{outlet}}
</script>

CSS

a {
    cursor: pointer;
}

JavaScript

//ref: http://jsfiddle.net/pangratz666/z8ssG/
$(function() {
    window.Xmote = Em.Application.create();
    
    Xmote.ApplicationController = Em.Controller.extend();
    Xmote.ApplicationView = Em.View.extend({});
    Xmote.router = Em.Router.create({
        enableLogging:true, //console.log( router/state changes )
        location: 'none',
        root:Em.Route.extend({
            index:Em.Route.extend({
                route:'/',
                connectOutlets:function(router, context){
                    router.get('applicationController').connectOutlet('navigation', 'navigation');
                }, 
            })
        })
    })
        
    Xmote.NavigationView = Em.View.extend({
        templateName: "navigation",
        classNames:["nav nav-tabs"],
        tagName:"ul"
    });
    Xmote.NavigationController = Em.ArrayController.extend({
        content:[{name:"item_1"}, {name:"item_2"}, {name:"item_3"}]
    });
    Xmote.BodyView = Em.View.extend({
        
    })
    Xmote.BodyController = Em.Controller.extend({})
    
    
    Xmote.initialize(Xmote.router);
    
});