Monday, September 22nd, 2008

PURE JavaScript Template Library Improves

Category: JavaScript

PURE, the JavaScript template engine, has had a major new release which includes:

  • Auto-rendering: a new PURE method takes your HTML and your JSON data and merges them automatically. The class attribute is used to map the HTML and the data. (Read more about autoRender and its jQuery version on our Wiki).
  • Functions as directive are called by reference and not serialized
  • Change the id of the template root node (as any other attribute)
  • Better string value handling
  • Use of named properties in iteration “obj.prop” as well as “obj[‘name’]“

For a feel of the library check out the documentation which takes you from the simplest render:

javascript

  1. $('#hello').autoRender({ "who": "Mary" });}

to more advanced examples such as going back to the server to get data to fill in:

javascript

  1. button.value = 'loading data...';
  2.   var script = (button.id == 'b4_2') ? 'js/jsonBig.js':'js/jsonSmall.js';
  3.   $.getJSON(script, function(context){
  4.  
  5.   var directive = {
  6.     'tbody tr td[onclick]':'"clickLine(this)"',
  7.     'tbody tr td[onmouseover]': '"swapStyle(this, true);"',
  8.     'tbody tr td[onmouseout]' : '"swapStyle(this, false);"',
  9.     'tbody tr td[style]':'\'cursor:pointer\'',
  10.        
  11.     'tbody tr[class]+':
  12.         function(context, items, pos){
  13.           var oddEven =  (pos % 2 == 0) ? 'even' : 'odd';
  14.           var firstLast = (pos == 0) ? 'first': (pos == items.length -1) ? 'last':'';
  15.           return oddEven + ' ' + firstLast; }}
  16.  
  17.   $('table.players.2').autoRender(context, directive);
  18.  
  19.   button.value = 'Refresh the page to render again';});}

Posted by Dion Almaer at 6:21 am
Comment here

+++--
3.1 rating from 36 votes

Comments Here »

Comments feed TrackBack URI

Leave a comment

You must be logged in to post a comment.