具有多个颜色选择器的 KnockoutJS 自定义绑定

Question

我刚开始使用 knockoutJS，我想我会通过创建一个小程序来改变页面上元素的颜色来进行试验。我正在为颜色选择器使用 jquery 光谱插件，并将其附加到一个小的 bootstrap 输入组插件，十六进制颜色显示在旁边的输入框中。

为了更改颜色，我认为最好的办法是为颜色更改创建一个自定义绑定，它会更新可观察对象，在本例中 'color1':

ko.bindingHandlers.changeColor = {
    init : function(element, valueAccessor){    
        value = valueAccessor();
        myColor = value;

        $(element).spectrum({
            beforeShow: function(color){
                $(this).spectrum("set", $(this).css("background-color"));
            },

            move: function(color){
              myColor(color.toHexString().toUpperCase());   
            }
        });
    }
};

function ColorViewModel(){
    color1 = ko.observable("#FFF000");
}

ko.applyBindings(new ColorViewModel());

然后我使用了以下标记：

<div class="input-group-addon" data-bind="style : {backgroundColor : color1()}, changeColor : color1"></div>
<input type="text" class="form-control input-sm" data-bind="value: color1()" />

这工作正常，但我的问题是在尝试添加与不同颜色可观察对象关联的第二个颜色框时出现。

现在每个颜色选择器只更新绑定的最后一个颜色可观察对象，而不是单独更新每个颜色可观察对象。我确定我遗漏了一些非常明显的东西，或者我误解了敲除自定义绑定的某些东西，但如果有人能指出我哪里出错了，我将不胜感激。

这里是 JSFiddle：

http://jsfiddle.net/mc3fLjq6/1/

Answer 1

您在变量声明之前缺少 var 关键字：

var value = valueAccessor();
var myColor = value;

演示 JSFiddle.

没有 var 关键字 value 和 myColor 被声明为 global variables，并且在添加第二个绑定处理程序时覆盖了第一个...

具有多个颜色选择器的 KnockoutJS 自定义绑定

KnockoutJS custom binding with multiple color pickers

javascript

jquery

custom-binding

knockout.js