javascript — сохранение значения wpColorPicker с нокаутированными пользовательскими привязками
я использую wpColorPicker и нокаут. Я пытаюсь обновить значение палитры цветов в моей наблюдаемой и затем сохранить в базе данных как JSON. У меня есть другие элементы, которые прекрасно обновляются и сохраняются, так что это действительно связано с моей пользовательской привязкой для средства выбора данных.
Я посмотрел и попробовал эта тема но я не могу понять, что я делаю не так.
Это часть скрипта в моем php-файле:
<div class="caption">
<div class="label">
<b><?php _e( 'Caption', 'lavilla' ); ?></b><br/>
<textarea class="slide-caption" data-bind="value: slideCaption"></textarea>
<br/>
<p class="text-color"><span class="label"><?php _e( ' Text color', 'lavilla' ); ?></span><input data-bind="wpColorPicker: textColor" /></p>
</div>
</div>
И это где я со своим JS:
function Slide(textColor) {
var self = this;
this.textColor = ko.observable(textColor);
ko.bindingHandlers.wpColorPicker = {
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().wpColorPickerOptions || {};
$(element).wpColorPicker(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).wpColorPicker("destroy");
});
},
update: function(element, valueAccessor, allBindingsAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).val(value);
$(element).change();
}
};
};
Решение
Я подозреваю, что вам лучше написать свой связыватель с нуля. В том, что вы используете, много бесполезного кода. Ваше назначение обработчика привязки не должно быть частью функции конструктора (Slide), оно должно быть создано только один раз. Начните с упаковки value связывание:
ko.bindingHandlers.wpcolorpicker = {
init: function(element, valueAccessor, allBindingsAccessor, data, context) {
$(element).wpColorPicker();
ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor, data, context);
},
update: function(element, valueAccessor, allBindingsAccessor, data, context) {
ko.bindingHandlers.value.update(element, valueAccessor, allBindingsAccessor, data, context);
}
};
У меня нет wpColorPicker для игры, поэтому я не могу дать вам полный ответ. Я подозреваю, что вам нужно использовать change вариант wpColorPicker обновить связанную переменную, когда выбран новый цвет.
Другие решения
Спасибо, Рой Дж. Я начал все заново и наконец нашел, как это написать:
ko.bindingHandlers.wpColorPicker = {
init: function( element, valueAccessor, allBindingsAccessor, data, context) {
var color = ko.unwrap( valueAccessor() );
$( element ).val( color );
var options= {
change: function (event, ui ) {
var value = valueAccessor();
value( ui.color.toString() );
},
};
$( element ).wpColorPicker( options );
}
};
Я использую функцию изменения wpColorPicker. Хитрость в том, что значение цвета в десятичном формате, и я должен передать его в шестнадцатеричном формате, чтобы выбить.