JavaScript template engine upgraded

I'm a big fan of separating the business logic and the presentation layer. This can be easily done by PHP, ROR, Java, etc. but when you try to do it in JavaScript it's not obvious how to do it, or which is the best way.

I've researched a lot on the topic and found two schools that is used by JS template libraries:
- Template language parsing
- Procedural approach
Both are great ways to generate, it only depends on your needs.

Here are some projects worth noting:

JST - JavaScipt templates - Big and evolved library, Smarty like syntax, GPL
SWATO - Very similar to the above, it's created for Java develpers. Example.
Chain.js - a nice tutorial about this.
PURE - this is a hybrid one and library free
jTemplates - a jQuery plugin
JTL - A Django template engine port

I played with the last one. It had some basic functions such as for loop, counter, reverse order, if syntax for checking if a value exists. The only problem was that it didn't had a comparison operator for strings and variables, so I decided to upgrade it.

Using it is easy:

var tpl = new Jtl( document.getElementById('tpl').value );

var data = {
  namelist :[
	{name : 'Johnnn' , job : 'Director',topicID:[1,2,3,4]},
	{name : 'Nick' , job : 'Manager',topicID:[4,3,6,5],test : 'Anything'},
	{name : 'Tony', topicID:[5,66,7]}
  ]
};
document.getElementById('destination').innerHTML = tpl.render( data );

And the template to be fetched:

{%for people in namelist%}
	
	{{forloop.counter}}.{{people.name}}
		{%if people.job eq 'Manager'%} Yes, I'm the {{people.job}}...{%endif%}
		
			{%for tid in people.topicID%}
				{{tid}}
			{%endfor%}
		
	
{%endfor%}

File attached to post: javascript_template_engine.zip

Tibor SzászInteraction matters

JavaScript template engine upgraded

Comments

Add new comment

Briefing

Topics

Friends

Feeling so social

Tags