KnockoutJS Custom Binding with Multiple Color Sets

Question

I am just starting with knockoutJS and thought that I would experiment by creating a small program that changes the colors of the elements on the page. I use the jquery spectrum plugin for the color picker and attach it to a small bootstrap input-addon group with hexadecimal display in the input box next to it.

To change the colors, I thought it was best to create a custom snap to change the color that updates the observable, in this case "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()); 

Then I used the following markup:

<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()" />

This works fine, but my problem occurs when trying to add a second color block associated with another color being observed.

, , , , . , - , - , , - , .

JSFiddle:

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

Answer 1

var :

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

JSFiddle.

var value myColor , , ..