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,
controls are the container selectors to find child states and controls. They default to
#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
[name] or provide your own. These should be selectors that will pick up child elements via a jQuery
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.