jQuery颜色选择器的编辑没有反映在Knockout observable中

Question

我在代码中使用jQuery颜色选择器插件，但它似乎不与KnockoutJS一起工作，因为当我试图输出值时，它没有更新我的可观察对象。

我有一个输入字段，我应该可以选择一个颜色:

<input class="colorpicker" id="bgcolor-one" name="bgcolor-one" type="text" data-bind="value: backgroundColor">
<br />
<span data-bind="text:backgroundColor">OUTPUT VALUE HERE</span>

在我的ViewModel中我有:

self.backgroundColor = ko.observable("333333");

但是，当使用颜色选择器时，它不会更新

<span data-bind="text:backgroundColor">OUTPUT VALUE HERE</span>

颜色选择器的代码:

$('.colorpicker').colpick({
    colorScheme: 'dark',
    layout: 'hex',
    color: 'ff8800',
    onChange:function(hsb,hex,rgb,el,bySetColor) {
        $(el).css('border-color','#'+hex);
        // Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
        if (!bySetColor) $(el).val(hex);
    },
    onSubmit: function (hsb, hex, rgb, el) {
        $(el).css('background-color', '#' + hex);
        $(el).val(hex);
        $(el).colpickHide();
    }
})

Answer 1

正确的方法是使用自定义绑定和bindingHandler。自定义绑定允许我们在视图中使用复杂的UI元素，并保持视图/视图模型的分离。这是文档页面:http://knockoutjs.com/documentation/custom-bindings.html.

你应该做的是创建一个bindingHandler来包装jquery插件启动代码。绑定处理程序有两个主要方法:init()和update()。init方法在绑定首次应用于DOM元素时调用。它用于执行一次性初始化，你应该在这里注册颜色选择器事件处理程序来更新可观察对象值，并通过接受一些选项作为参数以你想要的方式设置颜色选择器。update方法在每次可观察对象改变值时被调用，这是你应该告诉插件更新UI的地方(在这种情况下，调用colpickSetColor方法)。

看一下SO的问题。它将向您展示如何为颜色选择器插件创建一个bindingHandler。它是使用不同的插件实现的，但其思想几乎相同。