custom_list_item.js

/* in views */

sc_require('renderers/custom_list_item_renderer');

MyApp.CustomListItem = SC.ListItemView.extend({
  
  createRenderer: function(theme) {
    var ret = theme.customListItem();
    this.updateRenderer(ret);
    return ret;
  },
  
  // this may change, so it's more pluggable
  // ie. I might implement a function that returns
  // the attrs object and then that can be overriden
  // rather than having two separate calls to renderer.attr()
  // one here, and one in the super class
  updateRenderer: function(renderer) {
    sc_super();
    var attrs = {
      isFoo: this.get('isFoo')
    };
    renderer.attr(attrs);
  }
  
});

custom_list_item_renderer.js

/* in renderers */

SC.AceTheme.renderers.CustomListItem = SC.BaseTheme.renderers.ListItem.extend({
  
  calculateClasses: function() {
    var classes = sc_super();
    if (this.isFoo) classes['foo'] = YES;
    return classes;
  }

});

SC.AceTheme.renderers.customListItem = SC.AceTheme.renderers.CustomListItem.create();