Adding a view to page body

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}}</a>
</script>

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

CSS

.active {
    background-color:yellow;
    
}

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"}
                      ];

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

//The things
App.Things = Em.Object.create({
    content:[],
    init: function(){
        var self = this;
        self.get('content').pushObject(App.Thing.create({name:"blank", uuid:"9099"}))
        setTimeout(function(){
            $.each(applicationData, function(i, obj){
                self.get('content').pushObject(App.Thing.create(obj))
            })
        }, 2000)
    }
});
App.ThingsController = Em.Controller.extend({
    foo: function(context){
        $(".active").removeClass('active');
        context.$().addClass("active");
    }
});
App.ThingsView = Em.CollectionView.extend({
    contentBinding: 'App.Things.content',
    itemViewClass: 'App.ThingView',
    emptyView: Em.Handlebars.compile("<h1>Empty Collection</h1>"),
    didInsertElement: function(){
        var defaultItem = this.get('childViews').filterProperty('content.uuid', defaultItemUUID)[0];
        defaultItem.$().addClass('active');
    },
    foo: function(){
        console.log('foo in the collection');
 ...