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

Question

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

为了改变颜色，我认为最好的办法是为颜色变化创建一个自定义绑定，它会更新observable，在本例中为'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被声明为全局变量 ，并且在添加第二个绑定处理程序时覆盖了第一个...