This is a very nice feature, one of the great ideas that came with mootools 1.2. You can store any property within elements by simply mimicking the markup of <div myprop=”myvalue”> in javascript. However, setting such proprietary element properties in IE can be very slow. What mootools 1.2 did was to abstract element storage into a global object with the elements’ UID as key. Very smart, particularly as it allows for storing not only simple text assignments but even references to classes / instances, arrays and so forth.
Unfortunately, some of us (like the Joomla users) are stuck with using mootools 1.1.x for the time being and cannot take advantage of the element storage system. I am so used to keeping data contextual to elements within their storage that I ported the whole thing from 1.2. Here is all you need to achieve the .store and .retrieve element methods:
(function() { // compatibility layer with mootools 1.2 element storage system // scoped var storage = {}, Native = { UID: 1 }; var $uid = (window.ie) ? function(item){ return (item.uid || (item.uid = [Native.UID++]))[0]; } : function(item){ return item.uid || (item.uid = Native.UID++); }; var get = function(uid){ return (storage[uid] || (storage[uid] = {})); }; Element.extend({ retrieve: function(property, dflt){ if (!this.uid) $uid(this); var storage = get(this.uid), prop = storage[property]; if (dflt != undefined && prop == undefined) prop = storage[property] = dflt; return $pick(prop); }, store: function(property, value){ if (!this.uid) $uid(this); var storage = get(this.uid); storage[property] = value; return this; } }); })();
To see this in action, play with my simplified jfiddle example below:
[…] porting element storage from mootools 1.2 to 1.11 and 1.1.2 | frag … […]