Atasco personalizado KnockoutJS con múltiples selectores de color

Estoy empezando con knockoutJS y pensé que podría experimentar creando un pequeño progtwig que cambia los colors de los elementos en una página. Estoy usando el complemento de espectro jquery para el selector de color y lo he unido a un pequeño file de arranque input-group-addon, con el color hexadecimal que se muestra en el cuadro de input al costado.

Para cambiar los colors, pensé que lo mejor sería crear un enlace personalizado para el cambio de color, que actualiza el observable, en este caso '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()); 

Luego utilicé el siguiente marcado:

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

Esto funciona bien, pero mi problema surge cuando bash agregar un segundo cuadro de color asociado con un color diferente observable.

En lugar de actualizar cada color observable de forma individual, cada selector de color ahora solo actualiza el último color observable que estaba vinculado. Estoy seguro de que me estoy perdiendo algo bastante obvio o he entendido mal algo con las fijaciones personalizadas, pero agradecería que alguien pudiera señalar dónde me estoy equivocando.

Aquí el JSFiddle:

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

Falta la palabra key var antes de las declaraciones de variables:

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

Demo JSFiddle .

Sin el value palabra key var y myColor se declaran como variables globales , y se anula el primero cuando se agrega el segundo controller de enlace …

    Intereting Posts