JSFiddle - React, Tailwind, and code Playground

by Josh Carroll

HTML

<h1>This is OK in Knockout.js v. 2.2</h1>
<div class="group" data-bind="foreach: items">
    <div data-bind="text: $data, css: 'class_' + $index()"></div>
</div>
<h1>You have to use the 'attr' binding prior to 2.2</h1>
<div class="group" data-bind="foreach: items">
    <div data-bind="text: $data, attr: {class: 'class_' + $index()}"></div>
</div>

CSS

h1 {
    font-weight:bold;
    font-size: 1.25em;
}
.group{
    font-size: 1.1em;
    margin-top: 10px;
    margin-bottom: 10px;
}
.class_0 {
    color: red;
}
.class_1 {
    color: blue;
}
.class_2 {
    color: green;
}

JavaScript

(function() {

    ko.applyBindings({
        items: ko.observableArray(['one', 'two', 'three'])
    });

}());