jQuery颜色选择器编辑不在Knockout可观察到

我在我的代码中使用jQuery color picker plugin，但它似乎不与KnockoutJS一起工作，因为它不更新我的观察值，当我试图输出值。jQuery颜色选择器编辑不在Knockout可观察到

我有一个输入框，在这里我应该能够选择一种颜色：

<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的代码：

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

来源

2014-05-07 nuffsaid

你不应该改变模型上的值（例如somescope.backgroundColor（hexValue）;）而不是直接操纵元素的CSS样式？ –

模型的值应该更新为：$（el）.val（hex）; – nuffsaid

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

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

看看this关于SO的问题。它会告诉你如何为颜色选择器插件创建一个bindingHandler。它使用不同的插件实现，但想法几乎相同。

来源

2014-05-09 19:03:22 Eyal

jQuery颜色选择器编辑不在Knockout可观察到

回答

相关问题