Backbone.Smartclasses

Motivation

While Backbone.ModelBinding (and, I assume, most of the other legitimate model binding plugins) provides the ability to bind data values to view element attributes, it requires three data attributes and a custom function to alter class names in the general case. In fact, it actually requires more markup and more complex JavaScript than simply adding a model listener to the view class. More over, there's no way (in markup) to bind a model attribute to the View's $el at all.

This plugin was conceived for dealing with the case of adding and removing classnames from a View's $el.

Usage

Add the computed hash to a View to automatically add/remove classes:

  smartclasses:
    <className>:
      deps:[]
      test: <function>

And invoke the initializer:

  Backbone.View.extend({
    ...
    initialize: function() {
      this.initComputed();
    },
    ...
  });

###Options

deps (required for model-bound views; optional for collection-bound views)

Type: Array

Specifies the fields (for models) or events (for collections) induce recomputation of smartclasses.

It is strongly recommend that, for performance reasons, you specify this property for collection-bound views; in most cases, you probably only care about ['add', 'remove'] or [change:<specific-field>].

test (optional)

Type: function

The method for determining whether or not class should be added to the view. If omitted and any item in deps is truthy, the class will be added to the view

Example

The following JS and CSS show how to automatically show and hide a view based on its model's state.

.hidden {
  display: none;
}

  Backbone.View.extend({
    smartclasses: {
      hidden: {
        deps: [
          'firstName',
          'lastName',
        ]
      },
      test: function() {
        return this.has('firstName') && this.has('lastName');
      }
    },

    initialize: function() {
      this.initComputed();
    }
  });

TODO

• Add support for triggers outside of change events, e.g. elEvents, modelEvents, collectionEvents
• Add support for additional attributes (e.g. it may be desirable to alter the aria attributes of View)
• Add support for altering elements other than this.$el