jQuery Helper

State A
State B
State C

The StateHelper.jQuery() method returns a jQueryHelper instance which wires up elements to respond correctly to state updates. It is used throughout this demo as the standard way to visually interact with StateMachine.

The syntax to set up the helper is:

var helper = StateHelper.jQuery(fsm, states, controls, state, control);

In the code above, states and controls are the container selectors to find child states and controls. They default to #states and #controls, so if you stick to those ids in your markup, and mark up your states with ids and your controls with names, you will only need to call StateHelper.jQuery(fsm)to get StateMachine running.

In order to have StateMachine determine child elements, you can either accept the default child selectors [id] and [name] or provide your own. These should be selectors that will pick up child elements via a jQuery find().

The helper instance wires elements on construction, but has an additional update() method should you need to manually update the UI, perhaps after a render.

View the source of this page to see more, and the actual JavaScript code of the StateHelper to see how things are wired together.