Jquery Color Picker in Ember

Question

I have a button in my Ember on its click I want to call an action where the Jquery colorpicker will op up. The problem is this the first time click on the button nothing happens but the second time it starts working.

In my message.hbs file I want to get this. How can I get colorpicker to appear on click on my button?

In my color_picker.js I am doing like this.

Cards.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) {
            $('#postcard_message').css("color", '#' + hex);
            $('.color-preview').css("background-color", '#' + hex);
            $('#font-color').colpickHide();
        }
    });
},
willDestroyElement: function() {
    //Destroy plugin
}

}); I want the color picker to start working on one click. I don't want to click the button twice. Any help will be much appreciated.

Answer 1

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>