Eu reuni algumas extensões para Kendo Mobile MVVM, que
permitem simplificar a tarefa de representar estados de modelo usando
classes CSS .

cssToggle

Alternar entre duas classes css com base na veracidade
do valor do modelo

Uso:

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

Código:

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

Selecione uma classe css com base no limite do valor do estado. Você fornece uma lista
de estados com nomes de classes css correspondentes; consulte o uso abaixo.

Isso é preferível ao uso do integrado data-bind="style: property",
pois esse método permite que a associação states / css seja declarada na
visualização.

Uso:

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

Você pode formatar os espaços em branco na lista de estados css como quiser; os
espaços em branco serão corrigidos pelo pré-analisador, por exemplo

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

As chaves de estado numéricas também são válidas:

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

Código:

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}""""