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

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

我已经查看并尝试了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();
        }
    };
};

最佳答案

我怀疑您会更好地从头开始编写您的绑定处理程序。您正在使用的代码中有很多无用的代码。您的bindinghandler分配不应属于构造函数（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选项更新绑定变量。