Modifying Backbone.js views to fire Stativus events

example_view.js

var ApplicationView = StativusView.extend({

  template: _.template('<a href="#">Stativus</a>'),

  events: {
    'click a': 'showAlert'
  },

  render: function() {
    this.$el.html(this.template());
    return this;
  }

});

index.html

<div class='content'></div>

states.js

var statechart = Stativus.createStatechart();

statechart.addState('application', {
  enterState: function() {
    var view = new ApplicationView();
    $('.content').html(view.render().el);
    this.setData('view', view);
  },

  exitState: function() {
    this.getData('view').remove();
  },

  showAlert: function() {
    alert('Stativus: Statecharts for the rest of us!');
  }
});

statechart.initStates('application');

stativus_view.js

var StativusView = Backbone.View.extend({

  delegateEvents: function(events) {
    if (!(events || (events = _.result(this, 'events')))) return this;
    this.undelegateEvents();

    // define a function that will execute sendEvent on the statechart
    // statechart is the variable you've initialized as var statechart = Stativus.createStatechart();
    var sendEvent = function(action, data) { return function() { statechart.sendEvent(action, data); }; };

    for (var key in events) {
      if (events.hasOwnProperty(key)) {
        // new variable - this will be used to retain default backbone functionality
        // if the method has been defined on the view. this is sometimes desirable when
        // you want to manipulate the view before changing states
        var splitter = /^(\S+)\s*(.*)$/;
        var viewHasMethod = !!this[events[key]];
        var match = key.match(splitter);
        var eventName = match[1], selector = match[2];
        eventName += '.delegateEvents' + this.cid;
        var method = events[key];
        var func = null;

        if (viewHasMethod) { // retain default backbone view functionality
          if (!_.isFunction(method)) method = this[events[key]];
          if (!method) continue;
          func = _.bind(method, this);
        } else { // if no method defined - fire event on state chart
          if (_.isObject(method) && method.hasOwnProperty('event')) { // if object parse out event and data
            var data = null;
            if  (method.hasOwnProperty('data')) {
              data = _.isFunction(method['data']) ? method['data'].apply(this) : method['data'];
            }

            method = method['event'];
            func = sendEvent(method, data);
          } else func = sendEvent(method);
        }

        if (selector === '') {
          this.$el.on(eventName, func);
        } else {
          this.$el.on(eventName, selector, func);
        }
      }
    }
    return this;
  }

});