When using jquery plugins, wrapping them in views is a goof practice. Here is the demo link.
Here is the relevant code
App.ColorPicker = Em.View.extend({
classNames: ['cmp-colpick'],
pluglin: null,
templateName: 'color-picker',
didInsertElement: function() {
this.plugin = this.$().colpick({
layout: 'hex',
submit: 0,
color: '#000000',
onChange: function (hsb, hex, rgb, el, bySetColor) {
console.log('sdf');
$('body').css("background", '#' + hex);
}
});
},
willDestroyElement: function() {
//Destroy plugin
}
});
<script type="text/x-handlebars" data-template-name="index">
{{view App.ColorPicker}}
</script>
<script type="text/x-handlebars" data-template-name="color-picker">
<button>Choose Color</button>
</script>