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/

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

0 个答案: