Question

我的Ember中有一个按钮，我想调用一个Jquery颜色选择器将会启动的动作。问题是这是第一次点击按钮没有任何反应，但第二次开始工作。

在我的message.hbs文件中，我希望得到这个。如何在点击我的按钮时显示颜色选择器？

在我的color_picker.js中，我这样做。

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
}

}）; 我希望颜色选择器一键开始工作。我不想两次点击按钮。任何帮助将不胜感激。

Answer 1

使用jquery插件时，将它们包装在视图中是一种很好的做法。这是demo link。

以下是相关代码

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>

Ember的Jquery拾色器

1 个答案: