如何设置'样式:color'淘汰赛中的颜色选择器.JS

How to set 'style:color' with colorpicker in knockout.JS

本文关键字:淘汰赛 颜色 JS 选择器 color 设置 何设置 样式      更新时间:2023-09-26

我想用颜色选择器设置文本的颜色。找到了一个漂亮的小家伙,有一个击倒对手的捆绑器,但无法使其工作。

HTML:

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

Bindingshandler&视图模型:

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

感谢您的帮助。

Fiddle here:http://jsfiddle.net/AsleG/hmLbb9c0/2/

div既没有change事件,也不能用jQuery .val()方法读取其内容。

文档指出,您应该使用一个输入字段,并且只进行了更改,您就可以编写代码了。

http://jsfiddle.net/48evdyvx/1/