Javascript 如何设置'；风格：颜色'；在knockout.JS中使用colorpicker

我想用颜色选择器设置文本的颜色。找到了一个很好的小家伙，他有一个击倒的绑定器，但不能让它工作

HTML:

谢谢你的帮助

---

在这里摆弄：

A

div

既没有

change

事件，也不能用jQuery

.val（）

方法读取其内容

文档说明您应该使用一个输入字段，并且只有在进行了更改之后，您的代码才能正常工作

---

这篇文章可能会有所帮助-在我看来，

viewModel

对象也可以获得某种对

self

（即

var self=This；

）的引用，因为这会使调试更容易一些。

<div class="myPicker" data-bind="jqColorPicker: coverTextColor, colorPickerOptions: { value: coverTextColor}"></div>
<span class="title" data-bind="text: title, style: { color: coverTextColor}">blahblah</span>

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();
    }
};


viewModel = function(){
    var self = this;
    self.coverTextColor = ko.observable('green');
    self.title = ko.observable('Hi there!');
};

ko.applyBindings( new viewModel() );