Patroon: Another JavaScript Templating Solution

Written by on September 15th, 2008 in Uncategorized.

Matthias Georgi has posted the release of Patroon, his new templating system that uses JavaScript. It joins other solutions such as using Django via JavaScript (e.g. Dojo let’s you do that), TrimPath, and more.

The way it works is simple. You setup the data that you will be able to access in the template:

JAVASCRIPT:

  1.  
  2. var data = {
  3.   comment: [{
  4.     date: “2008-09-07 12:28:33″,
  5.     name: “David Beckham”,
  6.     website: “beckham.com”,
  7.     text: “I watched the euro finals on tv…”
  8.   }, {
  9.     date: “2008-09-07 14:28:33″,
  10.     name: “Tuncay”,
  11.     website: “”,
  12.     text: “Me too”
  13.   }]
  14. };
  15.  

Then you create an HTML template with variables a la {variablename}:

HTML:

  1.  
  2.     <div class=“comments”> 
  3.       <div id=“comments-template”>
  4.         <div class=“comment”>
  5.           <div class=“_ top”>
  6.             <a class=“_” href=“{website}”>{name}</a> said
  7.             <a class=“_” title=“{time}”></a>:
  8.           </div>
  9.           <div class=“text”></div>
  10.         </div>   
  11.       </div>
  12.     </div>
  13.  

Then you run the template and put the output back into the DOM:

JAVASCRIPT:

  1.  
  2. // The comments template will be removed from the DOM!
  3. var template = new Template(‘comments-template’);
  4.  
  5. // not using a library
  6.  
  7. // template will result in a new DOM node
  8. var result = template.expand(data);
  9.  
  10. // insert the resulting node into the comments container
  11. var container = document.getElementsByClassName(‘comments’)[0];
  12. container.appendChild(result);
  13.  
  14. // using jquery
  15. $(‘.comments’).expand(template, data);
  16.  

Source: Ajaxian » Front Page
Original Article: http://feeds.feedburner.com/~r/ajaxian/~3/393165653/patroon

Comments are closed.



Site Navigation