Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>There are many features that one can use if you read the source code, although the official line is: <code>if it's not in the documentation, it is not in the api and it's not supported so do not base your code around it as it may change</code></p> <p>That being said, there are a few things that really can be quite useful. One of my favourites undocumented features is this:</p> <p><strong>Referenced Elements have a uid</strong></p> <p>Any element that has either being created or is passed on through a selector, gets assigned a property <code>uid</code>, which is incremental and unique. Since MooTools 1.4.2, this is only readable via <code>Slick.uidOf(node)</code> and not via the old element attr <code>.uid</code>. You can now use the new <code>uniqueNumber</code> property of any MooTools Element object.</p> <p>How is that being used? For starters, Element Storage. It relies on the uid as the key in the <code>Storage</code> object inside a closure, which will have anything you have <code>.store</code>'d for that element. </p> <pre><code>element.store('foo', 'bar'); </code></pre> <p>translates to:</p> <pre><code>Storage[Slick.uidOf(element)].foo = 'bar'; </code></pre> <p>and </p> <pre><code>element.retrieve('foo'); // getter of the storage key element.eliminate('foo'); // delete Storage[Slick.uidOf(element)].foo </code></pre> <p>Initializing storage for an element you have created externally, eg, via <code>var foo = document.createElement('div')</code> and not Element constructor</p> <pre><code>Slick.uidOf(foo); // makes it compatible with Storage // same as: document.id(foo); </code></pre> <p>Things that are stored by the framework into Storage also include all <code>events</code> callbacks, <code>validators</code> instances, <code>Fx</code> instances (tween, morph etc) and so forth.</p> <p>What can you do knowing the UIDs of elements? Well, cloning an element does NOT get the element's storage or events. You can actually write a new <code>Element.cloneWithStorage</code> prototype that will also copy all of the stored values you may have, which is useful upto a point - instances that reference a particular element (such as, <code>Fx.Tween</code>) will continue referencing the old element, so it may have unexpected results. This can be useful in moving your own storage, though, all you need is a similar method that will record what you have stored and allow you to clone it. </p> <p>Example Storage puncture of another Element's data:</p> <pre><code>var foo = new Element('div'), uid = foo.uniqueNumber; foo.store('foo', 'foo only'); var bar = new Element('div'); console.log(bar.retrieve('foo')); // null bar.uniqueNumber = uid; // force overwrite of uid to the other el console.log(bar.retrieve('foo')); // foo only - OH NOES console.log(Object.keys(foo)); // ["uniqueNumber"] - oh dear. enumerable! </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload