Ember - View Functions

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>
<!-- Application.handlebars -->
<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">
  <ul class="nav_ul">
    <li><h1>Navigation!</h1></li>  
  </ul>
</script>

CSS

a {
    cursor: pointer;
}

JavaScript

$(function() {
    window.app = Em.Application.create();
    
    app.ApplicationController = Em.Controller.extend();
    app.ApplicationView = Em.View.extend({});
    app.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');
                }, 
            })
        })
    })
    app.Navigation = Em.Object.extend({
      name:"new Nav"
    });
  	app.NavigationController = Em.Controller.extend();
  	app.NavigationView = Em.View.extend({
      nameBinding: "app.Navigation.name",
      templateName:"navigation",
      willInsertElement:function(){
      	console.log("about to insert Navigation", this.isVisible, this.name);
        
      },
      didInsertElement:function(){
      	console.log("did insert");
        $(".nav_ul").hide({"duration":0, "complete":function(){
        	$(this).show('blind');
        }})
        //
      }
      
    })
    app.NavigationView.create();
    app.initialize(app.router);
    
});