Emberjs and Raphael template

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 src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://gist.github.com/raw/4520982/c707b0a86a7e3665cd7722aa7013f37d8040f202/ember-latest-20130113.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    Application
    {{outlet shapesMenu}}
</script>
<script type="text/x-handlebars" data-template-name="shape">
    
</script>

CSS

body {
    background-image: url(http://handlebarsjs.com/images/noise.png);
    background-image: url("http://handlebarsjs.com/images/noise.png");
}
a {
    cursor: pointer;
}
.shapesMenuItem {
    width: 60px;
    height:60px;
    border:solid 1px gray;
    border-radius: 5px;
    margin:2px;
    text-align:center;
}

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('shapesMenu', 'shapesMenu');
                }, 
            })
        })
    });
    */
    App.Router.map(function(match){
        match("/").to("index")
    });
    App.IndexRoute = Em.Route.extend({
        renderTemplate: function(){
            var controller = this.controllerFor('shapesMenu');
            this.render('shapesMenu', {outlet:'shapesMenu', controller:controller});
        }
    })
    
    App.ShapesMenu = Em.Object.create({
        content:[
            {type:'square', command:'rect', attr:{x:2, y:2, width: 56, height:56, fill:"#123"}}, 
            {type:'circle', command:'circle', attr:{cx:(60/2), cy:(60/2), r: (56/2), fill:"#456"}}, 
            {type:'ellipse', command:'ellipse', attr:{cx:(60/2), cy:(60/2), rx: (56/2), ry: (56/4), fill:"#789"}}
        ]
    });
    App.ShapesMenuController = Em.Controller.extend();
    App.ShapesMenuView = Em.CollectionView.extend({
        content:App.ShapesMenu.content,
        itemViewClass:'App.ShapesMenuItemView'
    });
    
    App.ShapesMenuItem = Em.Object.create();
    App.ShapesMenuItemController = Em.Controller.extend();
    App.ShapesMenuItemView = Em.View.extend({
        classNames:['shapesMenuItem'],
        templateName:"shape",
        init:function(){
            this._super();
        },
        didInsertElement:function(){
            console.log("this view ", this.get('content'));
        ...