Monday, September 22nd, 2008
PURE JavaScript Template Library Improves
Category: JavaScript
- 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
- Attach events to your HTML (Read more)
- 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:
-
-
$('#hello').autoRender({ "who": "Mary" });}
-
to more advanced examples such as going back to the server to get data to fill in:
JAVASCRIPT:
-
-
button.value = 'loading data...';
-
var script = (button.id == 'b4_2') ? 'js/jsonBig.js':'js/jsonSmall.js';
-
$.getJSON(script, function(context){
-
-
var directive = {
-
'tbody tr td[onclick]':'"clickLine(this)"',
-
'tbody tr td[onmouseover]': '"swapStyle(this, true);"',
-
'tbody tr td[onmouseout]' : '"swapStyle(this, false);"',
-
'tbody tr td[style]':''cursor:pointer'',
-
-
'tbody tr[class]+':
-
function(context, items, pos){
-
var oddEven = (pos % 2 == 0) ? 'even' : 'odd';
-
var firstLast = (pos == 0) ? 'first': (pos == items.length -1) ? 'last':'';
-
return oddEven + ' ' + firstLast; }}
-
-
$('table.players.2').autoRender(context, directive);
-
-
button.value = 'Refresh the page to render again';});}
-
Related Content:
3.1 rating from 31 votes
Leave a comment