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可觀察到

回答

相關問題