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

Question

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

Для того, чтобы изменить цвета, я подумал, что лучше всего сделать было бы создать пользовательскую привязку для изменения цвета, который обновляет наблюдаемое в этом случае «цвет1»:

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()); 

I «в затем использовал следующую разметку:

<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; 

Demo JSFiddle.

Без var ключевого слова value и myColor объявлены как global variables, и вы отменяют первый при добавлении второго связывания обработчика ...