Javascript template renderer

Question

I was looking into the different template parsers that are available for javascript and i am trying to create something of my own to use on the server (node.js) and client side. I want to write javascript with no limitations inside my template, like below, and i don't like to learn any new syntax. (don't worry about the tags, i just made them up, they could be just anything)

<ul>
<js>for (var i = 0, l = this.somearray.length; i < l; i++) {</js>
 <li>
 <span><js>print(this.somearray[i].key)</js></span>
 <span><js>print(this.somearray[i].value.toLowerCase())</js></span>
 </li>
<js>}</js>
</ul>

i was thinking of parsing this template using the function below.

function parse() {
 var split = template.split(/<js>(.*?)<\/js>/g),
 i, l;
 for (i = 0, l = split.length; i < l; i += 2) {
 var before = split[i],
 content = split[i + 1] || null;
 parsed += before ? 'print(' + JSON.stringify(before) + ');\n' : '';
 parsed += content ? (content + '\n') : '';
 }
 }

that would get me a result like this

print("<ul>\n");
for (var i = 0, l = this.somearray.length; i < l; i++) {
print("\n <li>\n <span>");
print(this.somearray[i].key);
print("</span>\n <span>");
print(this.somearray[i].value.toLowerCase());
print("</span>\n </li>\n");
}
print("\n</ul>");

the print function would look like this

function print(s) {
 output += s;
}

and if i then render the parsed code with eval the output would look like this...

<ul>
 <li>
 <span>key1</span>
 <span>value1</span>
 </li>
 <li>
 <span>key2</span>
 <span>value2</span>
 </li>
 <li>
 <span>key3</span>
 <span>value3</span>
 </li>
</ul>

Am i missing something here? A few lines of code and it's fast, it could cache the parsed javascript so next time it renders even faster. The only thing is i'm using eval which is considered evil but as long as i don't parse any user input i think it should be allright... Any thoughts on the code above??

• uadnal: I realize you said you want to create your own, but the underscore library has a very simple template engine. Easy to use and understand. documentcloud.github.com/underscore/#template
• Han Dijk: @Trevor, thanks! I totally overlooked the underscore template engine, i'll have a look into it, although it's not the fastest library around
• kzh: Have you seen: kuwata-lab.com/tenjin

Answer 1

I think John Resig's article about JavaScript microtemplating would help you, since you want to write your own stuff: http://ejohn.org/blog/javascript-micro-templating/

Answer 2

Did you try EmbeddedJS? It is really the kind of templating engine you're currently trying to build on your own :)

Its extremely performant, compiles your templates into JavaScript basically (similar as you describe above) so that you could debug your rendered HTML and has all the stuff build in like fetching templates remotely etc...And most importantly, you write plain JavaScript rather than having to use special tags for looping, conditional clauses and that stuff...

Example of a "rendered" HTML

this.process = (function(_CONTEXT,_VIEW){try { with(_VIEW) { with (_CONTEXT) {var ___v1ew = [];___v1ew.push("<h1>\n");
___v1ew.push(" Account Filtering</h1>\n");
___v1ew.push("<form id=\"accountFilter\">\n");
___v1ew.push("<div class=\"filter\">\n");
___v1ew.push(" <fieldset>\n");
___v1ew.push(" <h1>\n");
___v1ew.push(" Suchkriterien</h1>\n");
___v1ew.push(" <div class=\"full\">\n");
___v1ew.push(" <label class=\"description_left\">\n");
___v1ew.push(" Benutzername:</label>\n");
___v1ew.push(" <input name=\"username\" type=\"text\" class=\"m\">\n");
___v1ew.push(" </div>\n");
___v1ew.push(" <div class=\"full\">\n");
___v1ew.push(" <label class=\"description_left\">\n");
___v1ew.push(" Vorname:</label>\n");
___v1ew.push(" <input name=\"firstname\" type=\"text\" class=\"m\">\n");
___v1ew.push(" </div>\n");
___v1ew.push(" <div class=\"full\">\n");
___v1ew.push(" <label class=\"description_left\">\n");
___v1ew.push(" E-Mail-Adresse:</label>\n");
___v1ew.push(" <input name=\"email\" type=\"text\" class=\"m\">\n");
___v1ew.push(" </div>\n");
___v1ew.push(" <div class=\"buttons\">\n");
___v1ew.push(" <input type=\"submit\" name=\"applyFilter\" value=\"Suche\">\n");
___v1ew.push(" <input type=\"submit\" name=\"btnRemoveFilter\" value=\"Filter löschen\">\n");
___v1ew.push(" </div>\n");
___v1ew.push(" </fieldset>\n");
___v1ew.push("</div>\n");
___v1ew.push("</form>\n");
; return ___v1ew.join('');}}}catch(e){e.lineNumber=null;throw e;}});

• uadnal: This isn't really an answer to his question. :P
• Juri: @Trevor It's an answer in the sense "don't reinvent the wheel" :P. But I should maybe specify that more explicitly.
• Han Dijk: @Juri Nice answer, i had never heard of EmbeddedJS, it looks really nice, too bad it's performance is not that good considering jsperf.com/dom-vs-innerhtml-based-templating/275
• Juri: @HanDijk Damn, confused it with jQote2. Have a look at that in case (just Google). But as mentioned, I'd suggest you to not code your own thing if you don't really need to as I think there are already enough templating engines out there which probably have already figured out all the nitty gritty stuff you'd still have to :)
• Han Dijk: @Juri, you're right about that, i was just wondering if a template renderer could be really that simple, and by looking at the doT source code, it could, so i think i might just use that...

Answer 3

Exist a lot of template frameworks for javascript even for node.js

I recomend you to use doT it's very optimized and works on node.js and browsers.

For more template's engine options, take a look here: http://jsperf.com/dom-vs-innerhtml-based-templating/275

Compare at your self the best benefits for your work.

• Han Dijk: Wow, what's with the performace on doT? Why is it that fast compared to other template engines??
• Gabriel Gartz: I haven't inspected their code yet, but I droped underscore template to use doT and it's very optimized!