dev.enekoalonso.com » template http://dev.enekoalonso.com having fun with code Wed, 12 Oct 2011 21:40:17 +0000 en hourly 1 Mooml 1.2.3 – Bye, bye, with() http://dev.enekoalonso.com/2010/04/28/mooml-1-2-3-bye-bye-with/ http://dev.enekoalonso.com/2010/04/28/mooml-1-2-3-bye-bye-with/#comments Thu, 29 Apr 2010 04:26:54 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=517 Mooml 1.1 was the first version of Mooml that didn’t rely on eval(), a javascript function that causes lot’s of problems when not used properly, but that also prevent minimizers and compilers like Closure to generate valid code.

The new Mooml 1.2.3 release also gets rid of with(), which will no longer be used to render Mooml templates. Instead, templates are prepared when they get registered, so all template tag functions (div(), span(), p()) get replaced by calls to the Mooml engine. Although this means there will be a performance hit when registering templates, it also means templates will render faster. As a plus, template parameter names will no longer conflict with template tag function names. Thus, you can now have a template with a parameter named ‘div’ and the template wont fail rendering.

Download: http://mootools.net/forge/p/mooml
Source: http://github.com/eneko/mooml

Related Posts:

]]> http://dev.enekoalonso.com/2010/04/28/mooml-1-2-3-bye-bye-with/feed/ 3 Mooml 1.1 – No more eval(), say Hi to Mooml.Template and Mooml.Templates http://dev.enekoalonso.com/2010/03/24/mooml-1-1-no-more-eval-say-hi-to-mooml-template-and-mooml-templates/ http://dev.enekoalonso.com/2010/03/24/mooml-1-1-no-more-eval-say-hi-to-mooml-template-and-mooml-templates/#comments Wed, 24 Mar 2010 20:54:01 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=501 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:

  1. var tpl = new Mooml.Template('mytemplate', function(params) {
  2.   div({ id: params.divId }, params.divContent);
  3. });
  4. document.body.grab(tpl.render({
  5.   divId: 'mydiv',
  6.   divContent: 'Hi there!'
  7. }));
  8. // 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:

  1. var Dog = new Class({
  2.   Implements: [Options, Mooml.Templates],
  3.   options: {
  4.     bark: 'Bark! Bark!'
  5.   },
  6.   initialize: function(options) {
  7.     this.setOptions(options);
  8.     this.register('dog', function(bark) {
  9.      div({ 'class': 'dog'}, bark);
  10.     });
  11.   },
  12.   toElement: function() {
  13.     return this.render('dog', this.options.bark);
  14.   }
  15. });
  16.  
  17. document.body.grab(new Dog()); // <div class="dog">Bark! Bark!</div>
  18. document.body.grab(new Dog({ bark: 'Woof! Woof!' })); // <div class="dog">Woof! Woof!</div>
  19. 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:

  1. var tpl = new Mooml.Template('mytemplate', function(content) {
  2.   div(content);
  3. });
  4. document.body.grab(tpl.render(function() {
  5.   return 'Html <u>returned</u> by a function()'
  6. }));
  7. // 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:

  1. var tpl = new Mooml.Template('mytemplate', function(content) {
  2.   div({id:'div1'}, content);
  3.   div({id:'div2'}, content);
  4.   div({id:'div3'}, content);
  5. }, {
  6.   saveElementRefs: true
  7. });
  8. document.body.adopt(tpl.render('some text'));
  9. tpl.elementRefs.div1; // reference to <div id="div1">some text</div>
  10. tpl.elementRefs.div2; // reference to <div id="div2">some text</div>
  11. tpl.elementRefs['div3']; // reference to <div id="div3">some text</div>

Don’t miss the new demo: http://enekoalonso.com/projects/mooml/
Enjoy!

Related Posts:

]]> http://dev.enekoalonso.com/2010/03/24/mooml-1-1-no-more-eval-say-hi-to-mooml-template-and-mooml-templates/feed/ 0 More updates to Mooml coming soon http://dev.enekoalonso.com/2010/03/15/more-updates-to-mooml-coming-soon/ http://dev.enekoalonso.com/2010/03/15/more-updates-to-mooml-coming-soon/#comments Tue, 16 Mar 2010 04:56:35 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=499 I’ve been very busy lately, both with spaniards.es and at work. Too much stuff to do. Nevertheless, I’ve been working lately on a version of Mooml that does not rely on with/eval. The problem of using eval (which has bad reputation but is used every time we parse JSON -unless you use this- or load Javascript via AJAX) in Mooml is that it references external variables, something that is not suported by javascript compilers like Google Closure.

So, I got it working, using RegEx, but seems like it is way slower than eval. I have to do some performance testing and do some research to see if there is any way I can improve the performance. Hope to have version 1.1 ready soon.

Related Posts:

]]> http://dev.enekoalonso.com/2010/03/15/more-updates-to-mooml-coming-soon/feed/ 0 Having fun with Mooml & Twitter http://dev.enekoalonso.com/2010/02/19/having-fun-with-mooml-and-twitter/ http://dev.enekoalonso.com/2010/02/19/having-fun-with-mooml-and-twitter/#comments Fri, 19 Feb 2010 20:43:54 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=472 Mooml is a templating engine for Mootools. With it, you can create HTML from Javascript using a very clean syntax. Plus, it is extremely useful when you have to generate repeating elements, since Mooml automatically renders arrays of data multiple times. Let’s see an example.

Searching Twitter

Nowadays there are a lot of APIs out there that support JSON or JSONP, which we can use directly from the front end using Javascript. Also, there are other APIs that return tons of JS data, like Google Maps. In this example we are going to be searching Twitter and displaying the search results in a container div, properly rendered as HTML.

The url for searching Twitter is http://search.twitter.com/search.json?q=mootools&show_user=true (searching for Mootools in this case). Check the output:

  1. {
  2.   "results":[
  3.     {
  4.       "profile_image_url":"http://a3.twimg.com/profile_images/547672997/twitterProfilePhoto_normal.jpg",
  5.       "created_at":"Fri, 19 Feb 2010 17:08:55 +0000",
  6.       "from_user":"digitalr3bel",
  7.       "to_user_id":1212494,
  8.       "text":"@davidwalshblog Hi David – im a big fan of your site! Can you recommend a good MooTools tutorial for someone who can already program? thx",
  9.       "id":9343656026,
  10.       "from_user_id":23704390,
  11.       "to_user":"davidwalshblog",
  12.       "geo":null,
  13.       "iso_language_code":"en",
  14.       "source":"<a href="http://apiwiki.twitter.com/" rel="nofollow">API</a>"
  15.     }
  16.     // More results here…
  17.   ],
  18.   "max_id":9343656026,
  19.   "since_id":0,
  20.   "refresh_url":"?since_id=9343656026&q=mootools",
  21.   "next_page":"?page=2&max_id=9343656026&q=mootools",
  22.   "results_per_page":15,
  23.   "page":1,
  24.   "completed_in":0.0352710000000001,
  25.   "query":"mootools"
  26. }

We want to render each result inside out container div. On this example, we will just render the user name, user image and message text. Here is our Mooml template:

  1. Mooml.register('twitter-search-result', function(entry) {
  2.   div({id: "tweet-" + entry.id},
  3.     img({src: entry.profile_image_url, alt: entry.from_user}),
  4.     span(entry.from_user),
  5.     p(entry.text)
  6.   );
  7. });

Since all results are returned into an array, we can pass it directly to Mooml which will render all of the elements in it:

  1. // Data is the JSON response from Twitter
  2. Mooml.render('twitter-search-result', data.results);

So, let’s do a live test. Type something you want to search for and hit the search button to see Mooml in action :)

Search:

How cool is that?

The code

Ok, so here is the whole code I have used in this post for this mini-demo:

  1. <script type="text/javascript" src="http://enekoalonso.com/lib/mootools-1.2.4-core-nc.js"></script>
  2. <script type="text/javascript" src="http://enekoalonso.com/lib/mooml.js"></script>
  3. <script type="text/javascript">
  4. Mooml.register('twitter-search-result', function(entry) {
  5.   div({id: "tweet-" + entry.id},
  6.     img({src: entry.profile_image_url, alt: entry.from_user}),
  7.     span(entry.from_user),
  8.     p(entry.text)
  9.   );
  10. });
  11.  
  12. function searchTwitter() {
  13.   new Element('script', {
  14.     type:'text/javascript',
  15.     src:'http://search.twitter.com/search.json?q={text}&show_user=true&callback=renderData'.substitute({
  16.       text:$('twitter-mooml-search').get('value')
  17.     })
  18.   }).inject(document.head);
  19. }
  20.  
  21. function renderData(data) {
  22.   $('mooml-twitter-demo').empty().adopt(Mooml.render('twitter-search-result', data.results));
  23. }
  24.  
  25. $('twitter-mooml-search-btn').addEvent('click', searchTwitter);
  26. searchTwitter();

As you can see, the code is very basic and so is the Mooml template. The coolest thing here is that you don’t need to iterate over the results to render each element.

Have fun!

Related Posts:

]]> http://dev.enekoalonso.com/2010/02/19/having-fun-with-mooml-and-twitter/feed/ 0 Mooml.globalize(): Mooml template functions going global http://dev.enekoalonso.com/2010/02/01/mooml-globalize-mooml-template-functions-going-global/ http://dev.enekoalonso.com/2010/02/01/mooml-globalize-mooml-template-functions-going-global/#comments Mon, 01 Feb 2010 15:49:35 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=448 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:

  1.  // options can have attributes, css, events and more
  2. var mydiv = new Element('div', options);

With Mooml.globalize() we can do this:

  1. Mooml.globalize(); // Only need to call this once
  2. 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:

  1. var mydiv = div(options,
  2.  p('First paragraph'),
  3.  p('Second paragraph'),
  4.  div('Nested div:',
  5.   span('div content')
  6.  ),
  7.  Mooml.render('nested_template'),
  8.  'Some <b>inline</b> <em>html</em> too'
  9. );

Will generate the dom elements for this html:

  1. <div>
  2.  <p>First paragraph</p>
  3.  <p>Second paragraph</p>
  4.  <div>Nested div:
  5.   <span>div content</span>
  6.  </div>
  7.  <!– nested template here –>
  8.  Some <b>inline</b> <em>html</em> too
  9. </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.

Related Posts:

]]> http://dev.enekoalonso.com/2010/02/01/mooml-globalize-mooml-template-functions-going-global/feed/ 0