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

Question

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

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

它创建10个内联div，每个div代表其他颜色。当我点击一个div时，颜色被选中。我在分配'selected'时遇到了问题。 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