Mooml: Mootools markup language (intro)
It was a month ago when I found about Jaml, an excellent small Javascript library created by Ed Spencer which allows generating HTML code using very nice and clean templates. At work we use Mootools in most of our projects, so I thought it would be nice to improve Jaml by taking advantage of the power of Mootools. And this is the result.
Mooml: Mootools markup language
What is Mooml? Mooml is a templating system that allows generating HTML snippets very easily, without all the ugly nested “new Element” calls or string concatenation. With Mooml you can save templates for later use or evaluate snippets on the fly.
Download: http://mootools.net/forge/p/mooml
Source: http://github.com/eneko/mooml
Let’s see an example
Required HTML:
-
<div class="node">
-
<h2>Node Title</h2>
-
<p>Node body here.</p>
-
</div>
Node title and body are variables, so let’s save them on a Json format for now.
-
var data = {
-
title: 'Node Title',
-
body: 'Node body here'
-
}
Using Mootools “new Element” we would have to code something like this:
-
var el = new Element('div', {'class': 'node'}).adopt([
-
new Element('h2', {text: data.title}),
-
new Element('p', {text: data.body})
-
]);
That code is much better than plain Javascript, but still messy. We could use the new Elements.from included in Mootools More 1.2.4, but that would require us writing the html as a string, which rapidly gets messy concatenating variables, etc.
-
var el = Elements.from('<div class="node"><h2>' + data.title + '</h2><p>' + data.body + '</p></div>');
With Mooml…
With Mooml, we can create a template for that piece of code, and reuse it later as many times as we need:
-
Mooml.register('node', function(data) {
-
div({'class': 'node'},
-
h2(data.title),
-
p(data.body)
-
)
-
});
-
document.body.grab(Mooml.render('node', data));
We can also execute the template directly as a function:
-
document.body.grab(Mooml.templates.node(data));
Finally, with Mooml we can evaluate templates on the fly, without having to store them for later:
-
document.body.grab(Mooml.evaluate(function(data) {
-
div({'class': 'node'},
-
h2(data.title),
-
p(data.body)
-
)
-
}, data));
More examples soon :)
[...] Eneko Alonso ported the project to MooTools, creating mooml [...]