Demonstrate custom class binding

by Koviko

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.js"></script>
<div id="without">
    With <code>attr</code> binding:
    <ol data-bind="foreach: availableCountries">
        <li class="item" data-bind="text: $data, attr: { 'class': $parent.cssClass($data) }"></li>
    </ol>
</div>

<div id="with">
    With <code>class</code> binding:
    <ol data-bind="foreach: availableCountries">
        <li class="item" data-bind="text: $data, class: $parent.cssClass($data)"></li>
    </ol>
</div>

CSS

.short { font-size: 20pt; }
.medium { font-size: 15pt; }
.long { font-size: 10pt; }
.item { float: left; clear: left; font-family: "Trebuchet MS"; background-color: rgba(0,0,0,0.2); border-radius: 4px; padding: 4px 8px; margin: 4px 0 }
.item:hover { background-color: rgba(0,0,0,0.4) }
#without, #with { width: 50%; float: left }

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, $("#without")[0]);
ko.applyBindings(viewModel, $("#with")[0]);