Question

So I plan to create a complex page with many animatable UI elements. I want to come up with a clean way to maintain the state (expanded/collapsed, highlighted, etc.) of these animatable UI elements. I have a few ideas but I just want to know if anyone knew some js framework that does this so I don’t re-invent the wheel.

EDIT

My idea so far is:

1) On form post, get the state of each UI element and add it to POST data. I’m thinking of marking all UI elements I want to track state for with a special CSS class (a type of registration for tracking) and having each support some callback that will allow me to obtain their state in a polymorphic way (each UI element has it’s own understanding of state e.g. expanded, selected index, highlighted, etc)

2)Create HtmlHelpers for my UI elements that can recognize the state information sent from the client and output the UI element’s html in the correct state (I prefer the state be set on the server side rather than having js popping things all over the place trying to restore state on the client side…right?)

3)Not be as complex or bloated as WebControls or ViewState

Is there a framework that does stuff like that and does it way better and if not, does my proposed framework sound like a good idea?

Answer 1

I guess KnockoutJS might help you, since you can consolidate all the data/state management logic on it and then persist it the way you like, i.e. using the .toJSON() function and sending it to the server.

And perhaps you can integrate it with @Schwarty’s localStorage solution?