I've put together a couple of extensions for Kendo Mobile MVVM, which
allow you to simplify the task of representing model states using CSS
classes.

cssToggle

Switch between two css classes based on the truthiness
of the model value

Usage:

<div data-bind="cssToggle: truthyProperty" 
     data-enabled-css="on-class" 
     data-disabled-css="off-class"></div>

Code:

kendo.data.binders.cssToggle = kendo.data.Binder.extend({

  init: function(element, bindings, options) {

    kendo.data.Binder.fn.
                init.call(
                 this, element, bindings, options
               );

    var target = $(element);
    this.enabledCss = target.data("enabledCss");
    this.disabledCss = target.data("disabledCss");
  },

  refresh: function() {
    if ( this.bindings.cssToggle.get() ) {
      $( this.element ).addClass( this.enabledCss );
      $( this.element ).removeClass( this.disabledCss );
    } else{
      $( this.element ).addClass( this.disabledCss );
      $( this.element ).removeClass( this.enabledCss );
    }
  }

});

cssState

Select a css class based on the state value bound. You provide a list
of states with corresponding css class names, see the usage below.

This Preferable to using the built in data-bind="style: property",
as this method allows the states/css association to be declared in the
view.

Usage:

<div data-bind="cssState: switch"
     data-css-states="stop:red, go:green, slowdown:amber">

You can format whitespace in the css-state list how you like,
whitespace will be fixed up by the pre-parser, e.g.

<div data-bind="cssState: switch"
     data-css-states="
                       stop : red, 
                         go : green, 
                   slowdown : amber     ">

Numeric state keys are also valid:

<div data-bind="cssState: switch"
     data-css-states="0:red, 1:green, 2:go">

Code:

kendo.data.binders.cssState = kendo.data.Binder.extend({

  init: function(element, bindings, options) {

    kendo.data.Binder.fn.
                init.call(
                 this, element, bindings, options
               );

    var target = $(element);

    // convert the data-css-states 
    // string to JSON and parse it for use
    // when refresh happens.

    statePairs = target.data.cssStates.split(",");
    ar = [];
    for(var e in statePairs){
      var pair = statePairs[a].split(":");
      ar.push(
        kendo.format("\"{0}\":\"{1}\"",
                     pair[0].trim(),
                     pair[1].trim()
                    )
      );
    }
    this.states = JSON.parse(
                    kendo.format("{{0}}", ar.join(",")
                  )
    );
  },

  refresh: function () {
    var target = $(this.element);
    for(var removeCss in this.states) {
      target.removeClass(this.states[removeCss]);
    }
    var setCss = this.states
                 [
                   this.bindings.cssState.get()
                 ];
    target.addClass(setCss);
  }    
});