jQuery Knob Ember Component

HTML

<script type="text/x-handlebars" data-template-name="application">
    <h1>Application</h1>    
    {{x-knob value=rating}}
</script>
<script type="text/x-handlebars" data-template-name="components/x-knob">
    <!-- render the knob inside a wrap to control overflow -->
    <div class="x-knobWrap"></div>
</script>


<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.5.1/ember.min.js"></script>
<script src="https://rawgithub.com/gigafied/ember-animate/master/ember-animate.js"></script>
<script src="https://rawgithub.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"></script>

CSS

.knob{
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 25px;
    background-color: #ededed;
}

JavaScript

App = Em.Application.create();

//Ember translates XKnobComponent to x-knob...
// It seporates cammelCase by hyphen, lower cases it...
// and removes the 'type' ('component') in this case
//
//If we were using ember app kit, or es6...
// it would be a file named x-knob.js, and ...
// it would export Em.Component.extend();

App.XKnobComponent = Em.Component.extend({
    classNames: ['knob'],
    __inited: function(){
        var self = this;
        //
        console.log('onInit ', this.$().width())
        this.$('.x-knobWrap').knob({
            width: self.$().width(),
            thickness: '.3',
            change: function(v){
                self.set('value', v);
            }
        })
    }.on('didInsertElement'),
    
    __valueChanged:function(){
        this.$('.x-knobWrap').val(this.get('value')).trigger('change');
    }.observes('value')
    
});