Mooml 1.1 has been finally released today and made available to everybody via Github and Mootools Forge plugin repository.
What is new in Mooml 1.1
Mooml 1.1 has a lot of new features, but these are worth to mention:
- No more eval()
- Mooml.Template
- Mooml.Templates
- Pass functions as arguments to template functions
- References to elements with an Id
No more eval()
Although the use of eval() was transparent to the final user, Mooml 1.0.X depended on it to properly generate the dom elements using the template functions like div(), span(), table(), etc. Mooml 1.1 does not use eval() anymore, which prevents issues when compressing the code with compilers like Google Closure Compiler and also increments the overall performance of template rendering.
Mooml.Template
Mooml.Template is the new constructor for Mooml templates. This constructor will allow to create standalone templates like this:
-
var tpl = new Mooml.Template('mytemplate', function(params) {
-
div({ id: params.divId }, params.divContent);
-
});
-
document.body.grab(tpl.render({
-
divId: 'mydiv',
-
divContent: 'Hi there!'
-
}));
-
// will create: <div id="mydiv">Hi there!</div>
There is no need to create a Mooml.Template object when using Mooml.register(), which will work as in previous versions of Mooml.
Mooml.Templates
Mooml.Templates is a mixing that can be implemented into other Mootools classes. This will allow these classes to create their own templates internally and use them without the need of registering global templates with Mooml.register(). Here is an example of a Dog class:
-
var Dog = new Class({
-
Implements: [Options, Mooml.Templates],
-
options: {
-
bark: 'Bark! Bark!'
-
},
-
initialize: function(options) {
-
this.setOptions(options);
-
this.register('dog', function(bark) {
-
div({ 'class': 'dog'}, bark);
-
});
-
},
-
toElement: function() {
-
return this.render('dog', this.options.bark);
-
}
-
});
-
-
document.body.grab(new Dog()); // <div class="dog">Bark! Bark!</div>
-
document.body.grab(new Dog({ bark: 'Woof! Woof!' })); // <div class="dog">Woof! Woof!</div>
-
document.body.grab(new Dog({ bark: 'Arf!' })); // <div class="dog">Arf!</div>
Pass functions as arguments to template functions
With Mooml 1.1, template functions accept functions as arguments. These function can be any function that returns an element, array of elements, string, number or any other argument type supported by Mooml template functions. For example:
-
var tpl = new Mooml.Template('mytemplate', function(content) {
-
div(content);
-
});
-
document.body.grab(tpl.render(function() {
-
return 'Html <u>returned</u> by a function()'
-
}));
-
// will create: <div>Html <u>returned</u> by a function()</div>
References to elements with an Id
Finally, Mooml 1.1 templates can return references to all elements rendered that contain an Id, including elements rendered in nested templates:
-
var tpl = new Mooml.Template('mytemplate', function(content) {
-
div({id:'div1'}, content);
-
div({id:'div2'}, content);
-
div({id:'div3'}, content);
-
}, {
-
saveElementRefs: true
-
});
-
document.body.adopt(tpl.render('some text'));
-
tpl.elementRefs.div1; // reference to <div id="div1">some text</div>
-
tpl.elementRefs.div2; // reference to <div id="div2">some text</div>
-
tpl.elementRefs['div3']; // reference to <div id="div3">some text</div>
Don’t miss the new demo: http://enekoalonso.com/projects/mooml/
Enjoy!
