Using a State Machine to keep my UI Simple and Flexible? Good Idea? How do I do it in Knockout JS?

Question

I’m new to Knockout JS. Should I use sammy.js to help me with the below?

I am building a Knockout JS App (single page) where as I move from state to state, exactly what sub panels are visible and what they do changes. For example:

• pre-login, I have one big panel that invites the user to login.

• Right after login, I have a bunch of tabs, a main area for searching and an advertisement at the bottom.

• If the user does a search, then I end up in a state where we see tabs, a search area and a search results area.

I imagine doing this via having a state machine that moves from state to state as the user clicks, sort of the way a parser would move from state to state.

I imagine delegating to the current state, an object hanging off of the ViewModel (perhaps) so that my 20 or so different states are almost like 20 very simple different UIs each one separate from the others and simple and clean and easy to understand.

1 - How would I do this, have the UI delegate a sub UI to a sub object hanging off the ViewModel?

2 – Is there a better way to keep my UI simple even though it has lots of states and different states often look very different from one another in terms of what elements (sub panels) are visible?

3 – Does anyone have an example were the code repeatedly delegates to a sub user interface?

Am I making sense?

Answer 1

A framework that would probably fit very well is machina.js - should be just what you are looking for.

Here is a presentation on it from jQuery UK - stateful machines