I developed a basic Backbone.js finite state machine (FSM) view for use on a project I was working on a while ago, and have been meaning to clean up the code and share it for a while now. It is now available on github, along with some qunit and sinon tests.

It was written to handle complex form navigation, i.e. when you want to conditionally guide a user through a path of form fields depending on their previous answers, and so while it could perhaps be shoehorned into other uses, this is where it will be the most natural fit. It works basically by binding a method to the change event on form fields that translates this event into terms understood by the FSM, and then calls transitions that you’ve defined when initializing the view.

There is some basic js and HTML on the github page demonstrating use. I plan to have more/better code, along with a working example, at some point.

backbone-fsm-view

Since writing this a few other people have come up with implementations that, though they appear quite different from mine, would accomplish mostly the same thing. See backbone.statemachine, and machina.js. Also, I definitely got inspiration for this code from a few other places on the web while writing it, but can’t track them down now. If anyone reading this thinks it reminds them of something they’ve seen elsewhere, or if they have suggestions on how it could be improved, feel free to let me know. I’m always open to suggestions and/or pull requests.