javascript - 使用 knockout 自定义绑定(bind)保存 wpColorPicker 值

Question

我使用wpColorPicker和 knockout 。我试图在我的可观察中更新颜色选择器的值，然后将其作为 JSON 存储在数据库中。我还有其他可以完美更新和保存的元素，因此它确实链接到我的数据选择器的自定义绑定(bind)。

我查看并尝试过this thread但我不知道我做错了什么。

这是我的 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();
        }
    };
};

Answer 1

我怀疑你从头开始编写绑定(bind)处理程序会做得更好。您正在使用的代码中有很多无用的代码。您的绑定(bind)处理程序分配不应该是构造函数(幻灯片)的一部分，它应该只创建一次。首先包装 value 绑定(bind):

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 可以玩，所以我不能给你一个完整的答案。我怀疑您需要使用 wpColorPicker 的 change 选项来在选择新颜色时更新绑定(bind)变量。