jQuery颜色选择器绑定处理程序创建多个div [英] Jquery color picker binding handler creates multiple divs

问题描述

我正在尝试使用此jQuery 颜色选择器与淘汰赛.js.我已经编写了自定义组合带处理程序，以将colorpicker输入控件绑定到我的viewModel颜色值.

I am trying to use this jquery color picker with knockout.js. I have written custom banding handler to bind colorpicker input control with my viewModel color value.

这是绑定处理程序代码:

Here is the Binding Handler code:

ko.bindingHandlers.colorPicker = {
init: function (element, valueAccessor, allBindingsAccessor) {

    //initialize datepicker with some optional options
    var options = allBindingsAccessor().colorPickerOptions || {};
    $(element).colorPicker(options);

    //handle the field changing
    ko.utils.registerEventHandler(element, "change", function () {
        var observable = valueAccessor();
        observable($(element).colorPicker("value"));
    });

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).colorPicker("destroy");
    });

},
update: function (element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());       
    $(element).colorPicker("value", value);        
}

和HTML:

 <input type="text" data-bind="colorPicker: newEvent().color, colorPickerOptions: { value:newEvent().color }"/>

问题是，当我更改颜色时，每次更改颜色时都会创建多个div，如图所示.

Problem is that when I change the color it creates the multiple divs each time when I change the color as shown in image.

任何人都可以确定我的代码中存在什么问题吗?

Can anyone please identiy whats the problem in my code??

推荐答案

这是jQuery ColorPicker绑定处理程序的更新代码(与kickout.js libraray一起使用).

Here is the updated code for jQuery ColorPicker binding handler (to used with knockout.js libraray).

ko.bindingHandlers.jqColorPicker = {
  init: function (element, valueAccessor, allBindingsAccessor) {

    // set default value
    var value = ko.utils.unwrapObservable(valueAccessor());
    $(element).val(value);

    //initialize datepicker with some optional options
    var options = allBindingsAccessor().colorPickerOptions || {};
    $(element).colorPicker(options);

    //handle the field changing
    ko.utils.registerEventHandler(element, "change", function () {            
        var observable = valueAccessor();            
        observable($(element).val());                        
    });

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).colorPicker("destroy");
    });

  },
  update: function (element, valueAccessor, allBindingsAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    $(element).val(value);        
    $(element).change();        
  }
};

这篇关于jQuery颜色选择器绑定处理程序创建多个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！