Since version 1.0.9, Mooml includes a new feature:
For example, in normal Mootools code we would create a div like this:
-
// options can have attributes, css, events and more
-
var mydiv = new Element('div', options);
With Mooml.globalize() we can do this:
-
Mooml.globalize(); // Only need to call this once
-
var mydiv = div(options); // Same options as Mootools new Element()
Mooml globalized functions can also have nested elements, which makes very easy to create dom elements:
-
var mydiv = div(options,
-
p('First paragraph'),
-
p('Second paragraph'),
-
div('Nested div:',
-
span('div content')
-
),
-
Mooml.render('nested_template'),
-
'Some <b>inline</b> <em>html</em> too'
-
);
Will generate the dom elements for this html:
-
<div>
-
<p>First paragraph</p>
-
<p>Second paragraph</p>
-
<div>Nested div:
-
<span>div content</span>
-
</div>
-
<!– nested template here –>
-
Some <b>inline</b> <em>html</em> too
-
</div>
Elements created by Mooml template functions are not automatically injected in the DOM. They are just created like when you use new Element().
Please be aware that using Mooml.globalize() feature will pollute the window object scope, overriding any methods with the same name and/or possibly conflicting with other Javascript libraries. As a tip, Mooml.tags can be edited before calling Mooml.globalize(), so only functions for those tags we are interested on will be created.