MooTools toElement Method and ToElement Mixin
The toElement
Method
Classes like Calendar, Slider, AutoCompleter etc. are all containing elements or responsible for elements.
There are several approaches for how to handle the element in the class:
- Pass a container element as an argument to the constructor of the class, and append to it new elements that the class creates
- Have the actual behavior-less element(s) on the HTML and pass them to the class constructor as an argument, the class will apply its behaviors on them
- Create all elements in the class and have them available for appending
Each approach is good for a different situation, but the toElement
method is meant mostly for the last one.
Example of a plain class, and how its element is being appended to the document:
1 2 3 4 5 6 7 8 9 10 |
|
This is quite ugly to use the public property input
, which its name can be changed someday and then the code breaks. Moreover, in this way, each class declares its own property and this can lead to inconsistency between the property names.
This is where the toElement
method comes in handy: it’s a MooTools convention for a method that simply returns the element.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
But wait, there’s more: MooTools $
/ document.id
function knows that if it gets an object that has the toElement
method, the method should be invoked and the returned element will be returned out of the document.id
function. Luckily, all of the MooTools Element
methods use document.id
inside them, so, for instance, when grab
or adopt
are called with any object as an argument, it will be passed thru the document.id
function which will translate it to the toElement
result. Hence, we can use this:
1
|
|
The ToElement
Mixin
The ToElement Mixin is supposed to make the toElement
method even simpler, and make it lazy-load the element, i.e. create it only when needed.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
Usage:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
First, it adds a ui
hash to every class instance. That’s my convention to save elements in classes of this kind. Second, it adds a toElement
method, which is responsible of calling the build
method if exists, and return this.ui.element
or this.element
out of the instance.
Benefits are:
- Lazy load the element - it’ll be created only when the document asks for it
ui
hash to contain all other elements, and abuild
method as a simple convention