Как связать класс CSS внутри пользовательского связывания

Question

Я создал пользовательскую привязку для использования в качестве палитры цветов.

<ul data-bind="colorPicker: selcol"></ul>

Он создает 10 встроенных div, каждый из которых представляет другой цвет. Когда я нажимаю div, цвет выбирается. У меня проблема с назначением "выбранных"; класс css для выбранного div. Я пытаюсь использовать привязку CSS внутри пользовательской привязки, но это не работает. Он выбирает только начальный div, который остается выбранным даже после выбора другого div.

Пожалуйста, проверьте пример: http://jsfiddle.net/zbkkzdsp/Jbvvq/

Спасибо за любую помощь. Если у вас есть какие-либо подсказки или комментарии к моему коду, пожалуйста, дайте мне знать. Я довольно новичок в нокауте и буду использовать любую возможность, чтобы узнать больше.

Answer 1

Кажется, что вы делаете много модных вещей с вычисленными значениями в вашей пользовательской привязке, поэтому я бы порекомендовал создать модели представления для ваших цветов.

Сначала определите модель вида для каждого отдельного цвета:

var ColorModel = function(options) {
  var self = this;

  // Keep a reference to the parent picker for selection
  self.picker = options.picker;

  // The CSS value of the color
  self.color = ko.observable(options.color || 'transparent');

  // A flag denoting whether this color is selected
  self.selected = ko.observable(options.selected || false);

  // This will be called when the corresponding color link is clicked
  // Note that we're not doing any event binding with jQuery as with your custom binder
  self.select = function() {
    self.picker.selectColor(self); 
  };
};

Затем модель представления для самого палитры цветов:

var ColorPickerModel = function() {
  var self = this;

  // The list of all colors
  self.colors = ko.observableArray([]);

  self.addColor = function(color) {
    var newColor = new ColorModel({
        picker: self,
        color: color
    });

    self.colors.push(newColor);
    return newColor;
  };

  // Called by individual colors
  self.selectColor = function(colorModel) {
    // Deselect the current color so we don't select two
    var current = self.selected();
    if (current) {
      current.selected(false);
    }

    // Mark the color as selected - KO will do the rest
    colorModel.selected(true);

    // Remember this color as the selected one to deselect later
    self.selected(colorModel);
  };

  // Create at least one default color
  var transparent = self.addColor('transparent');

  // Keep track of the selected color - set to transparent by default
  self.selected = ko.observable(transparent);
  transparent.select();
};

Затем свяжите ваш HTML-вид с вашей моделью представления:

<div id="color-picker">
  <div data-bind="foreach: colors">
    <a href="#" data-bind="
       style: { 'background-color': $data.color }, 
       css: { 'selected': selected }, 
       click: select"></a>
  </div>
  <div>
    Selected color: <span data-bind="text: selected().color"></span>
  </div>    
</div>

И связать все это вместе:

var pickerDiv = document.getElementById('color-picker'),
    picker = new ColorPickerModel();

// Add some colors
picker.addColor('red');
picker.addColor('blue');
picker.addColor('green');
picker.addColor('orange');
picker.addColor('purple');
picker.addColor('black');

// Bind Knockout
ko.applyBindings(picker, pickerDiv);

// Add more colors - the view will update automatically
picker.addColor('pink');

Вот рабочий пример: http://jsbin.com/izarik/1/edit