Обработчик привязки палитры цветов Jquery создает несколько элементов div

Я пытаюсь использовать этот jquery выбор цвета с нокаутом.js. Я написал собственный обработчик полос, чтобы связать элемент управления вводом colorpicker с моим значением цвета 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 каждый раз, когда я меняю цвет, как показано на рисунке.

введите здесь описание изображения

Может ли кто-нибудь определить, в чем проблема в моем коде ??


color-picker jquery knockout.js
person Diya Khan    schedule 13.09.2012    source источник
comment
что такое newEvent? Можете ли вы предоставить скрипку с деталями этой проблемы?   -  person jimmym715    schedule 14.09.2012

Ответы (2)


arrow_upward
4
arrow_downward

Вот обновленный код обработчика привязки 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();        
  }
};
person Diya Khan    schedule 17.12.2012

arrow_upward
0
arrow_downward

В вашем коде обновления вы фактически создаете новые палитры цветов.

Когда цвет меняется, вызывается функция обновления, и там вы создаете новый сборщик. Если вы попробуете '$(element).colorPicker("value", value);' в firebug, вы увидите, что это не установщик, а конструктор.

person Community    schedule 12.10.2012
comment
Я пытаюсь использовать это, но не могу установить цвет текста, см. скрипку: jsfiddle.net/AsleG/hmLbb9c0 /2 - person Asle G; 10.02.2015