Wednesday, January 23rd, 2008

MooTools 1.2 Beta 2 Released, Adds New Element Storage

Category: MooTools

The MooTools team has been quietly hacking away at their next major release of the MooTools library. A couple of days ago, project leader Valerio announced Beta 2 of MooTools v1.2 for public consumption:

Its been almost 2 months since the first 1.2 beta. Bugs were fixed, features were improved, and here it comes: the second beta. The first big feature we’ve been working on for 1.2 is Documentation.

1.2 Documentation is in fact almost 5 times more detailed than it was in version 1. Every class option has now its description, every method has a complete list of arguments along with description, type, and now every functionality comes with a code example — sometimes more than one. If you want to see it for yourself, here is the temporary link for the 1.2 beta documentation.

Along with enhanced documentation, this release also introduces the new Element Accessors feature which makes working with elements more concise. Valerio offered a nice example which basically negates the need for chaining:

href: ‘’,
text: ‘mad4milk website’,
morph: {duration: 200, transition: ‘quad:out’},
events: {
click: function(){
document.location.href = this.href;
return false;

Tom Occhino followed up with another blog posting about the new Element Storage class which is meant to provide a better method of storing data for DOM elements. The concept came about mainly due to issues with how IE handles the storage of additional attributes within Elements especially with respect to memory leaks.

Element.Storage is brand new in MooTools 1.2. It is basically an external Hash that stores all the custom properties and events for every element you interact with. Let’s take another look at our previous example, this time using the new Element.Storage API:

var element = $(‘myElement’);‘effectInstance’, new Fx.Tween(element, ‘color’));‘customProperty’, ‘someProperty’);

element.retrieve(‘effectInstance’); //the Fx.Tween instance
element.retrieve(‘customProperty’); //’someProperty’

Note that events and actions are no longer attached directly to the Elements. Everything is stored in the external Hash, and managed by MooTools, so as a developer, you have nothing to worry about. Finally, an elegant and coherent API for attaching custom properties, functions, and objects to Elements.

Tom’s blog posting goes into greater detail about the implementation and the applicable scenarios.

Posted by Rey Bango at 11:45 am

4.3 rating from 64 votes


Comments feed TrackBack URI

Congrats on the new release and thanks for the new docs. I’d prefer the old-fashioned put/get to store/retrieve for Element.Storage but thats just semantics.

Comment by Andy Kant — January 23, 2008

put/get is like half the bytes as well! I much prefer $.data anyway. Also, if you’re not chaining, in what order are ‘Element Accessors’ processed? Is there a speed advantage to not chaining?
No namespacing, native objects are further extended, and the methods are verbose — but very explanatory. I’d rather have overloaded methods and clean native objects.
Yet again I understand what the MooTools library is doing, I don’t understand why, and I can’t seem to find the reasons, either. To each their own, I guess! Go MooTools.

Comment by Charles — January 23, 2008

It seems like there are several changes with the core framework, doesn’t look like a simple upgrade from 1.11 to 1.2 …

Comment by farinspace — January 23, 2008

Apparently they haven’t made it fully backwards compatible with 1.11 either. There is however another link you can run that will patch it. Why they didn’t make the patched version the actual beta I don’t know. I’m having trouble in Firefox with $(elements) losing their events. I guess I’ll have to download this new patched version and see if it resolves this.

Comment by starkraving — January 23, 2008

I am currently re-writing our CMS api and Mootools has always been our base. Since the beta 1 release we decided to use that version and have been using it’s new features as much as possible; Our favorites are the object method inheritance and the element storage.

because element storage is linked in with mootools garbage you have to make sure you destroy() every element you reference in your scripts but boy does memory stay low in all the browsers.

Comment by 800px — January 24, 2008

the mootrolls are surprisingly missing from this thread. it doesn’t have that distinct ‘OMG you didn’t mention mootools!!!111″ type of comments :)

Comment by Viktor Kojouharov — January 24, 2008

Viktor – mootrolls? Ohhh, you must be one of those jQueers. Stop dissing on a frame work that is trying to evolve Javascript to do new and exciting things instead of just piecemeal-addons to its status quo. Lame a$$.

Comment by csuwldcat — January 24, 2008

What’s so exciting about this Element Storage feature? Doesn’t everyone know this already? This can’t be the highlight of the release. I got nothing against the cow people but they need to step it up. Every time they release something I get the feeling I’ve seen it in another framework a week earlier.

Comment by cdude — January 24, 2008

Viktor, csuwldcat, why don’t you two take that attitude somewhere else?

Comment by Aaron N. — January 24, 2008


Comment by jurio — February 6, 2008

Mootools 1.2 is backwards compatible, you just have to enable the 1.1 compat libraries when you download 1.2b[1-2].

Comment by hydrian — February 20, 2008

Now that its out of Beta, check out the final changes including a much-improved (imo) API and more features than you can shake a stick at:

Comment by jdempcy — June 17, 2008

Leave a comment

You must be logged in to post a comment.