Пользовательская привязка KnockoutJS с несколькими палитрами цветов

Question

Я только начал с knockoutJS и подумал, что я бы поэкспериментировал, создав небольшую программу, которая изменяет цвета элементов на странице. Я использую плагин jquery spectrum для палитры цветов и прикрепил его к небольшой начальной загрузке add-group-addon с шестнадцатеричным цветом, отображаемым в поле ввода рядом с ним.

Я подумал, что для того, чтобы изменить цвета, лучше всего создать пользовательскую привязку для изменения цвета, которая обновляет наблюдаемое, в данном случае '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 объявляются как глобальные переменные, и вы переопределяете первую, когда добавляете второй обработчик привязки...