Mooml.globalize(): Mooml template functions going global

Eneko Alonso — Mon, 01 Feb 2010 15:49:35 +0000

Since version 1.0.9, Mooml includes a new feature: globalize. It maybe handy for some websites to globalize all the Mooml template functions (div, a, p, span…) to the window object scope, so they can be used anywhere in the code without the need of defining or evaluating a template.

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 inline html too'
);

Will generate the dom elements for this html:

First paragraph
Second paragraph
Nested div:
div content

Some inline html too

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.

April 28, 2010 -- Mooml 1.2.3 – Bye, bye, with() (3)
March 24, 2010 -- Mooml 1.1 – No more eval(), say Hi to Mooml.Template and Mooml.Templates (0)
February 19, 2010 -- Having fun with Mooml & Twitter (0)
March 15, 2010 -- More updates to Mooml coming soon (0)

dev.enekoalonso.com » global

Mooml.globalize(): Mooml template functions going global

Related Posts: