Stack Overflow 13096154

http://stackoverflow.com/questions/13096154/knockout-css-databinding-using-a-function

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.debug.js"></script>
<p id="text" data-bind="css: cssColor">FOOBAR!</p>
<button data-bind="click: changeColor(null)">none</button>
<button data-bind="click: changeColor('red')">red</button>
<button data-bind="click: changeColor('green')">green</button>
<button data-bind="click: changeColor('blue')">blue</button>
<button data-bind="click: toggleBold">bold</button>
<p data-bind="text: ko.toJSON(cssColor)"></p>

CSS

.red { color: red; }
.green { color: green; }
.blue { color: blue; }
.bold { font-weight: bold; }

JavaScript

function ViewModel()
{
    this.bold = ko.observable(false);
    
    this.selectedColor = ko.observable();
    var defaultColor = {
        red: false,
        green: false,
        blue: false,
        bold: this.bold
    };
    this.cssColor = ko.computed(function () {
        var selectedColor = this.selectedColor();
        var css = ko.utils.extend({}, defaultColor);
        if (typeof selectedColor == 'string') {
            css[selectedColor] = true;
        }
        return css;
    }, this);

    this.changeColor = function (color) {
        return function (target) {
            target.selectedColor(color);
        };
    };
    this.toggleBold = function (target) {
        target.bold(!target.bold());
    };
}
        
ko.applyBindings(new ViewModel());