Question

我使用wpColorPicker并淘汰赛。我试图在我的observable中更新颜色选择器的值，然后将其作为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();
        }
    };
};

Answer 1

我怀疑你会从头开始更好地编写绑定处理程序。你正在使用的代码中有很多无用的代码。你的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的{{1}}选项来更新绑定变量。

Answer 2

谢谢Roy J.我从头开始重新开始，终于找到了如何写它：

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的功能更改。诀窍是颜色值是十进制的，我必须将它以十六进制传递给淘汰赛。

使用knockout自定义绑定保存wpColorPicker值

2 个答案: