Demonstrate custom class binding

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.js"></script>
<ol data-bind="foreach: availableCountries">
    <li data-bind="text: $data, class: $parent.cssClass($data)"></li>
</ol>

CSS

.short { font-size: 20pt; }
.medium { font-size: 15pt; }
.long { font-size: 10pt; }

JavaScript

ko.bindingHandlers['class'] = {
    'update': function(element, valueAccessor) {
        if (element['__ko__previousClassValue__']) {
            $(element).removeClass(element['__ko__previousClassValue__']);
        }
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).addClass(value);
        element['__ko__previousClassValue__'] = value;
    }
};

var viewModel = {
    availableCountries : ko.observableArray([
        'France', 
        'Germany', 
        'Spain',
        'Italy',
        'Greece',
        'Serbia',
        'Croatia',
        'Switzerland',
        'USA',
        'Canada',
        'Mexico'
    ]),
    cssClass : function(country) {
        if (country.length < 6)
            return 'short';
        else if (country.length < 9)
            return 'medium';
        else
            return 'long';
    }
};
ko.applyBindings(viewModel);