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 id
s and your controls with name
s, 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.