Question

我创建了一个自定义绑定以用作颜色选择器。

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

它创建10个内联div，每个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

如何在自定义绑定中绑定css类

1 个答案: