Emberjs Route v2 reconnect outlet

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://gist.github.com/raw/4520982/c707b0a86a7e3665cd7722aa7013f37d8040f202/ember-latest-20130113.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    Application
    {{outlet myContainer}}
</script>
<script type="text/x-handlebars" data-template-name="myContainer">
    {{view App.CustomTextField }}
</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, .otherShapesMenuItem {
    width: 60px;
    height:60px;
    border:solid 1px gray;
    border-radius: 5px;
    margin:2px;
    text-align:center;
}

.otherShapesMenuItem {
    border:solid 1px red;
}

JavaScript

$(function(){    
	//Bind Application name to window
    window.App = Em.Application.create({
        autoInit: false,
        LOG_TRANSITIONS:true
    })
    
    //Create Application controller, view and router
    App.ApplicationController = Em.Controller.extend();
    App.ApplicationView = Em.View.extend({});

    App.Router.map(function(match){
        match("/").to("index")
    });
    App.IndexRoute = Em.Route.extend({
        renderTemplate: function(){
            var controller = this.controllerFor('myContainer');
            this.render('myContainer', {outlet:'myContainer', controller:controller});
        }
    })
    
    App.MyContainer = Em.Object.create({
        foo:function(){
            console.log("I foo'd");
        }
    });
    App.MyContainerController = Em.Controller.extend({
        content:['blah', 'blah2', 'blah3']
    });
    App.MyContainerView = Em.View.extend({
        
    });
    App.CustomTextField = Em.TextField.extend({
        //controller:'App.ContainerController',
        classNames: ['customTextField'],
        didInsertElement : function(){
            var self = this;
            this.$().on('blur', function(e){
                self.checkPrice()
            })
        },
        checkPrice:function(){
            App.MyContainer.foo()
        }
    });

    //Start the app
    App.initialize(App.router);
    
});