Messing around with a pattern to update classes on a Backbone.Component.

binding_attribute_pattern.js

var $body = $('body')
  , stateMap = { ON: 'On :)', OFF: 'Off :(', BLINK: 'Blinking!' }
  , TriStateSwitch = Backbone.Component.extend({
    tagName: 'button',
    events: {
      'click': 'updateState' 
    },
    attrBindings: {
      'alt': 'state'
    }
    initialize: function(opts) {
      this.model = new Backbone.StateModel({
        states: ['OFF', 'ON', 'BLINK'],
        values: stateMap,
        currentState: opts.startState || 'OFF' });
    },
    render: function() {
      this.$el.text('I have 3 states. Try it.');
      this.updateBindings();

      return this;
    },
    updateState: function() {
      this.model.nextState();
    }
  });

var b = new TriStateButton({});
$body.html(b.render().$el);

manual_attribute_pattern.js

var $body = $('body')
  , states = { ON: 'On :)', OFF: 'Off :(', BLINK: 'Blinking!' }
  , TriStateSwitch = Backbone.Component.extend({
    tagName: 'button',
    events: {
      'click': 'updateState' 
    },
    initialize: function(opts) {
      this.model = new Backbone.Model({ state: states[opts.state] || states.OFF });
    },
    render: function() {
      this.$el.text('I have 3 states. Try it.');
      this.$el.attr('alt', this.model.get('state'));

      return this;
    },
    updateState: function() {
      var switch = this.model.get('state');
      if (switch == states.OFF) { this.model.set('state', states.ON); }
      else if(switch == states.ON) { this.model.set('state', states.BLINK); }
      else if (switch == states.BLINK) { this.model.set('state', states.OFF); }
    }
  });

var b = new TriStateButton({});
$body.html(b.render().$el);