Implementing render-less behaviors with CSS class as link to DOM

behavior.js

/*globals SC MyApp */

// Default CSS animations are defined in CSS files for these properties
MyApp.MyBehavior = SC.Behavior.extend({

  target: 'MyApp',
  action: 'doSomething',

  initialHandler: 'mouseUpNotOver',

  mouseUpNotOver: SC.Handler.extend({
    // no extra CSS class names applied
    mouseEntered: 'mouseUpOver' // <= changes current handler/classNames to 'mouseUpOver'
  }),

  mouseUpOver: SC.Handler.extend({
    classNames: 'hover',

    // this is the default animation *to* this state
    // you can override this in the *from* state, per event, as needed
    transitions: {
      opacity: '1s linear' // <= applied to style attribute, overrides CSS values
    },

    mouseExited: 'mouseUpNotOver',
    mouseDown: 'mouseDownOver'
  }),

  mouseDownOver: SC.Handler.extend({
    classNames: 'active over',
    mouseExited: 'mouseDownNotOver',
    mouseUp: function(evt) {
        this.performAction();
        this.goHandler('mouseUpJustClicked');
        return true; // we handled the event
    }
  }),

  mouseDownNotOver: SC.Handler.extend({
    classNames: 'active',
    mouseEntered: 'mouseDownOver'
  }),

  mouseUpJustClicked: SC.Handler.extend({
    // no extra CSS class names applied
    mouseMoved: 'mouseUpOver',
    transitions: {
      mouseMoved: {
        opacity: '0.1s linear' // <= applied to style attribute, overrides CSS values
      }
    }
  })

});

behavior_classes.js

// separating classNames from the behavior

MyApp.MyBehaviorClasses = {
    mouseUpNotOver: '',           // none
    mouseUpOver: 'hover',
    mouseDownOver: 'active over',
    mouseDownNotOver: 'active',
    mouseUpJustClicked: ''        // none
}

Where you getting SC.Behavior from? Can't even find it in the source.

I'm designing it now. :-)

This approach could be freaking awesome. Would work with SC.TemplateView, and you could add behavior to any DOM element in your template.

Oh, and Yehuda had some nice shortcuts to in his revision: https://gist.github.com/810573/d533a01b6e32d09f6c4726deff343423f6c98bb5

I like that api, really clean and intention revealing.