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

问题描述

我正在尝试使用这个 jquery color选择器 与knockout.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 绑定处理程序的更新代码(与knockout.js 库一起使用).

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！