Ember elementId Override

by amindunited

HTML

<script src="http://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 widgets}}
</script>
<script type="text/x-handlebars" data-template-name="widget">
    {{view.content.name}}
</script>

CSS

/*//////////////////////////////////////////////////////////////////////
//SOF entypo*/
@import url(http://weloveiconfonts.com/api/?family=entypo);

html, body {
    font-size: 10px;
    font-family: sans-serif;
}
[class*="icon"] {
  font-family: 'entypo';
}

.entypo-items, .entypo-items:before {
  /*font-family: 'entypo';*/
}
.entypo-items > div {
    display:inline-block;
    font-size: 4em;
    color: #999999;
}

.entypo-items > div:hover {
    color:black;
}
/*/ EOF entypo
//////////////////////////////////////////////////////////////////////*/
.icon-phone:after { content:"\1F4DE"; }
.icon-mobile:after { content:"\1F4F1"; }
.icon-mouse:after { content:"\E789"; }
.icon-address:after { content:"\E723"; }
.icon-mail:after { content:"\2709"; }
.icon-paper-plane:after { content:"\1F53F"; }
.icon-pencil:after { content:"\270E"; }
.icon-feather:after { content:"\2712"; }
.icon-attach:after { content:"\1F4CE"; }
.icon-inbox:after { content:"\E777"; }
.icon-reply:after { content:"\E712"; }
.icon-reply-all:after { content:"\E713"; }
.icon-forward:after { content:"\27A6"; }
.icon-user:after { content:"\1F464"; }
.icon-users:after { content:"\1F465"; }
.icon-add-user:after { content:"\E700"; }
.icon-vcard:after { content:"\E722"; }
.icon-export:after { content:"\E715"; }
.icon-location:after { content:"\E724"; }
.icon-map:after { content:"\E727"; }
.icon-compass:after { content:"\E728"; }
.icon-direction:after { content:"\27A2"; }
.icon-hair-cross:after { content:"\1F3AF"; }
.icon-share:after { content:"\E73C"; }
.icon-shareable:after { content:"\E73E"; }
.icon-heart:after { content:"\2665"; }
.icon-heart-empty:after { content:"\2661"; }
.icon-star:after { content:"\2605"; }
.icon-star-empty:after { content:"\2606"; }
.icon-thumbs-up:after { content:"\1F44D"; }
.icon-thumbs-down:after { content:"\1F44E"; }
.icon-chat:after { content:"\E720"; }
.icon-comment:after { content:"\E718"; }
.icon-quote:after { content:"\275E"; }
.icon-home:after { content:"\2302";...

JavaScript

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

/*
App.Widgets = Em.Object.create();
App.Widgets = Em.Controller.extend();
*/
App.WidgetsView = Em.CollectionView.extend({
    content: [{uuid:001, name:"a"}, {uuid:002, name:"b"}, {uuid:003, name:"c"}, {uuid:004, name:"d"}],
    itemViewClass: "App.WidgetView",
    didInsertElement: function(){
        console.log("inserted");
    }
});
/*
App.Widget = Em.Object.extend();
App.WidgetController = Em.Controller.extend();
*/
App.WidgetView = Em.View.extend({
    templateName: "widget",
    init: function(){
        this.set('elementId', "gabbagabbahey_"+this.get('content').uuid);
        return this._super();
    }
    
});