JSFiddle - React, Tailwind, and code Playground

by sonik

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>

<div id="testDiv">
    
    <label><input type="checkbox" data-bind="checked: isEnabled"/>Enabled</label><br/>
    <span data-bind="cssClass: {condition: isEnabled, class1: style-red, class2: style-blue }">Span with CSS</span>  
    <br/>
    viewModel.isEnabled == <span data-bind="text: isEnabled"/>
</div>

CSS

.style-red
{
    color:Red;            
}

.style-blue
{
    color:Blue;
}

JavaScript

kendo.data.binders.cssClass = kendo.data.Binder.extend( {
        refresh: function() {
            var classBinding = this.bindings["cssClass"],
                source = classBinding.source,
                pathObj = classBinding.path;

            var condition = source.get( pathObj.condition );

            if ( condition ) {
                $( this.element ).addClass( pathObj.class1 );
                $( this.element ).removeClass( pathObj.class2 );
            }
            else{
                $( this.element ).removeClass( pathObj.class1 );
                $( this.element ).addClass( pathObj.class2 );
            }
        }
    });



var viewModel = kendo.observable({
    isEnabled : false
});


kendo.bind($("#testDiv"), viewModel);