More Routing problems

by amindunited

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.2/ember.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    Application top
    {{render thing}}
    {{render thingiesCollection}}
</script>
<script type="text/x-handlebars" data-template-name="thing">
    <a {{action newRoute view target="controller"}}>Click to change route</a>
</script>
<script type="text/x-handlebars" data-template-name="thingie">
    <a {{bindAttr class="view.content.class"}}>{{view.content.name}}</a>
    {{#each bah in view.content.others}}
    <div {{bindAttr class="bah"}}>I'm an other</div>
    {{/each}}
</script>

CSS

.active {
    background-color:yellow;
    
}

.a {
    color: red;
}

JavaScript

window.App = Em.Application.create();
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend({
    foo: function(){
        console.log('foo in apllication');
    }
});

var defaultItemUUID = "9099";//This will be the default item that we find, and add ".active" class to

//This is the data that will be "returned from the server"
var applicationData = [{name:"thing one", uuid:"111"}, 
                       {name:"thing two", uuid:"222"}, 
                       {name:"thing three", uuid:"333"}, 
                       {name:"thing four", uuid:"444"}, 
                       {name:"thing five", uuid:"555"}, 
                       {name:"thing six", uuid:"666"}, 
                       {name:"thing seven", uuid:"777"}, 
                       {name:"thing eight", uuid:"888"}
                      ];
var currentRoute = "index";
//The thing
App.Thing = Em.Object.extend();
App.ThingController = Em.Controller.extend({
    newRoute: function () {
        if (currentRoute == "index" ) { 
            currentRoute = "nav"
            this.get('target').transitionToRoute('nav')
        }
        else if (currentRoute == "nav" ) { 
            currentRoute = "sub"
            this.get('target').transitionToRoute('sub')
        }
        else if (currentRoute == "sub" ) { 
            currentRoute = "index"
            this.get('target').transitionToRoute('index')
        }
    }
});
App.ThingView = Em.View.extend({ templateName:"thing" });

App.Nav = Em.Object.create({
    content:[],
    otherContent:[],
    thirds:[]
});
App.NavController = Em.Controller.extend({
    contentBinding:'App.Nav.content',
    otherContentBinding:'App.Nav.otherContent',
    thirdsBinding:'App.Nav.thirds',
    init: function(){
        console.log("In Nav Controller ", this.get('content'), this.get('otherContent'), this.get('thirds'));
    }
});
App.NavView = Em.CollectionView.extend();

App.NavItem = Em.Object.extend();
App.NavItemController =...