NavRouting and template loads

by amindunited

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    Application top
    {{outlet nav}}
</script>
<script type="text/x-handlebars" data-template-name="nav">
    <ul>
        
    {{#each item in controller.nContent}}
        {{#with item}}
        <li><a {{action clicked item target="view"}}>{{item.name}}</a></li>
        {{/with}}
    {{/each}}
    </ul>
    {{outlet footer}}
</script>
<script type="text/x-handlebars" data-template-name="nav_2">
    Nav 2
    <ul>
        
    {{#each item in controller.nContent}}
        {{#with item}}
        <li><a {{action clicked item target="view"}}>{{item.name}}</a></li>
        {{/with}}
    {{/each}}
    </ul>
    {{outlet footer}}
</script>
<script type="text/x-handlebars" data-template-name="navFooter">
    FOOOOOOTER!
</script>

JavaScript

window.App = Em.Application.create();
App.ApplicationController = Em.Controller.extend({
    needs:['foo'],
    init: function(){
        console.log("Application controller");
        var f = this.get('controllers.foo')
    }
});
App.ApplicationView = Em.View.extend();
getNavContent = function(){
    
        return t = setTimeout(function(){
            console.log("returning");
           App.Nav.set('content',  [{name:"Item_1"}, {name:"Item_2"}, {name:"Item_3"}, {name:"Item_4"}, {name:"Item_5"}, {name:"Item_6"}]);
        }, 2000);
}
App.Nav = Em.Object.create({
    content:[{name:"Item_1"}, {name:"Item_2"}, {name:"Item_3"}]
});
App.NavController = Em.ArrayController.extend({
    nContentBinding:'App.Nav.content',
    init:function(){
        console.log("my content is", this.get('content'));
    },
    setActiveItem:function(e){
        console.log("setActiveItem", e);        
    },
    contentListener:function(){
        console.log("content update", this.get("nContent"));
    }.observes('this.nContent')
});
App.NavView = Em.View.extend({
    didInsertElement:function(){
        console.log("view inserted", this.get('controller').get('content'));
        getNavContent();
    },
    contentListener: function(){
        console.log('view saw controller update content');
        if (this.get('controller').get('nContent').length > 3 && this.get("templateName") != "nav_2") {
            this.set("templateName", "nav_2");
            this.rerender();
        }
    
    }.observes('this.controller.nContent'),
    clicked: function(e){
        console.log("clicked ", e);
        this.get('controller').setActiveItem(e);
    }
});

App.Foo = Em.Object.create({
    content: ['a', 'b', 'c']
})
App.FooController = Em.ObjectController.extend({
    contentBinding: 'App.Foo.content',
    init: function(){
        console.log("foo controller init'd", this.get('content')) 
        this.set('content', ['1','2','3','4','5',]);
        
    },
    contentListener: function(){
...