Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Modifying Backbone.js views to fire Stativus events
var ApplicationView = StativusView.extend({
template: _.template('<a href="#">Stativus</a>'),
events: {
'click a': 'showAlert'
},
render: function() {
this.$el.html(this.template());
return this;
}
});
<div class='content'></div>
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');
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;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.