Collection And Controllers Problem

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 things}}
</script>
<script type="text/x-handlebars" data-template-name="thing">
    <a {{action foo view target="controller"}}>
        {{view.content.name}}, {{view.content.uuid}}
    </a>
</script>

<div><a id="doSomething">Do something</a></div>

CSS

.active {
    background-color:yellow;
    
}

JavaScript

window.App = Em.Application.create();
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend({});

//The thing
App.Thing = Em.Object.extend();
App.ThingController = Em.Controller.extend();
App.ThingView = Em.View.extend({ 
    templateName:"thing",
    tagName:"li"
});

App.OtherThings = Em.Object.create({
    content:[{name:"other One"}, {name:"Other two"}]
});
App.OtherThingsController = Em.Controller.extend({
    contentBinding:'App.OtherThings.content'
});
App.OtherThingsView = Em.View.extend()

//The things
App.Things = Em.Object.create({
    content:[
        {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"}
    ]
});

App.ThingsController = Em.Controller.extend({
    needs:['otherThings'],
    foo: function (context) {
        console.log("Things controller can see the otherThings Controller", this.get('controllers.otherThings').content);
        alert("There are " + this.get('controllers.otherThings').content.length + " objects in the otherThings controller!")
        $(".active").removeClass('active');
        context.$().addClass("active");
    }
});

App.ThingsView = Em.CollectionView.extend({
    tagName:'ul', 
    contentBinding: 'App.Things.content',
    itemViewClass: 'App.ThingView',
    emptyView: Em.Handlebars.compile("<h1>This view is </h1>"),
});
//////////////////////////////////////////////