After reading the Ajaxian article about jQuery.concrete, I was interested in learning more, so I opened the tutorial (note that while you are viewing the tutorial that there is a “Next >>” link at the top next to the page header and that on all-but-the-first-page the top panel scrolls down, providing a peak at even more code) and the video (couldn’t get this to play at all, perhaps Vimeo was a little overloaded?).
The first couple tutorial slides are certainly worth reading, to help you get the Concrete syntax, but slide 3, Overriding events, is where things get good or, as the author says, “Now this is interesting.”. Concrete allows the developer to write overriding Concrete events, in the case of this tutorial page, two mouseover events (or rather onmouseenter and onmouseleave, as Concrete prefers): one for the native ul li and another for ul.lightens li. So, in operation, all the native ul lis will get the first set of mouse events, but if any have the additional class of “lighten”, they will instead get the second set of mouse events, and will NOT get the first.
And, amazingly, this holds true even after dynamic interaction with the DOM, such as something happening on the page that adds or removes .lighten from a ul. As the author says, “[t]his calculation of the most specific function occurs on every call, so there is no delay, recalc(), rebind() or any other step neccesary (sic) between mutating the DOM (changing a class, adding an element, etc), and having the right functions get called”… THIS is powerful stuff! Very CSS-like, right? Where you could have one set of CSS for the innate state of an element, and another for the same elements but perhaps with an additional class of “hover” or “active”. The CSS knows which to apply and when, and now with Concrete, so does your JS!
Of course, this leaves you saying, “but I don’t want to override my initial function, I just want to add to it.” Well, I say that would be just _super()… :-) Slide 4, Super, shows that by adding this._super(); to the more-specific function, Concrete will now add to the mouse events, rather than override. Pretty slick, right? (Though I do have to say, I think _add() might have been more intuitive, but, there’s that…).
Anyway, I won’t walk you through each and every step of the tutorial, I think the author has already done a really good job of that, I just wanted to give you a teasing taste of what Concrete can do. I hope this makes you at least run it through its paces!
Happy coding,
Atg