我正在尝试使用这个jquery color picker与 knockout .js。我已经编写了自定义 strip 处理程序来将颜色选择器输入控件与我的 viewModel 颜色值绑定(bind)。
这是绑定(bind)处理程序代码:
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,如图所示。
任何人都可以确定我的代码有什么问题吗?
最佳答案
这里是 jQuery ColorPicker 绑定(bind)处理程序的更新代码(与 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();
}
};
关于Jquery 颜色选择器绑定(bind)处理程序创建多个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12399892/