garann means > totes profesh

a defunct web development blog

CSS, live(), and application state

Wed, 16 Jun 2010 18:02:19 +0000

An idea I ended up thinking a lot about as a result of the application rewrite I just did was managing client-based application state with CSS classes. I've been making mental lists, trying to figure out how far you could take it and whether it would be useful. I was thinking there was probably some performance caveat or something, but then I read this post on the relative speed of live() and now I'm thinking maybe it's something worth exploring more.

Using (what used to be) my application as an example, I can see a few possible states..

You couldn't use switching classes alone to manage those if there were roles certain information had to be hidden from - you'd have to take care of that on the server, obviously. And you'd have to check permissions on any type of update, but presumably you'd be doing that anyway.. For my application it would work fine, though. For certain pieces of the application, I implemented a pared-down version and it's pretty successful.

What I actually tried was really simple. I just applied a CSS class to a container, causing pieces of the interface to be shown and hidden. Event handlers for those elements were attached with jQuery live(), so that as stuff gets added and removed, its event handlers are already (usually) set up and switching states merely reveals or hides the elements that trigger them.

Examples of WTF changing the "state"/container class actually does..

Especially with regard to changing event handlers, I'm assuming jQuery live() was designed with this use case in mind? What I mean is like:

$("div.editable a.editItem").live("click",function() { showSomeEditor(); }); $("div.error a.editItem").live("click",function() { alert("Nice try. Fix whatever you screwed up, then we'll talk."); });

I think this is just handy as hell, but every time I try to google information about how other people might be doing the same thing, I come up with nothing. So in the absence of any best practices or warnings, I'm still playing around with it on my own. I think it's cool.