Jquery 颜色选择器绑定处理程序创建多个 div

Question

我正在尝试将此 jquery color picker 与 knockout.js 一起使用。我已经编写了自定义绑定处理程序来将颜色选择器输入控件与我的 viewModel 颜色值绑定。

这里是绑定处理程序代码：

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，如图所示。

谁能确定我的代码有什么问题？

Answer 1

这是 jQuery ColorPicker 绑定处理程序的更新代码（与 knockout.js 库一起使用）。

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();        
  }
};

Answer 2

在您的更新代码中，您实际上是在创建新的颜色选择器。

当颜色发生变化时，会调用更新函数并在那里创建一个新的选择器。如果你在 firebug 中尝试 '$(element).colorPicker("value", value);'，你会发现它不是一个 setter，而是一个构造函数。