HTML Templates in Javascript? Without coding in the page?

Question

I am a web guy doing mostly Perl server-side stuff, and I'm slowly coming to a few conclusions.

• It is far better to do most of your code via Javascript and toss data back and forth via AJAX than it is to hit submit and reload a mostly-identical page
• I like jQuery because I like CSS, and it's fun to chain together big long and scary-to-others definitions
• There's something to that templating stuff.

You want your HTML elements to look like your HTML elements, and it's easier to define that in HTML:

<div class="sidebar_elem">
     <a href=""> TEXT</a>
</div>

Than it is to cobble up the same in Javascript or jQuery:

( '<div/>' )
     .attr('id' , 'sidebar_elem' + i )
     .addclass( 'sidebar_elem' )
     ;
( '<a/>' )
     .attr('href' , link_url )
     .appendTo( '#sidebar_elem' + i )
     ;

This is to say that I am no longer a templating agnostic, but I don't know which templating tool to believe in. I have looked into some jQuery-based templating plugins, but I have yet to become happy with any of them, in part because the ones I've seen seem to want to put all that code into the page itself, which breaks the "Only markup goes into HTML files, only style goes into CSS files, only code goes into JS files" mantra I keep reciting.

So, I'm looking for a Javascript-based templating tool that would allow me to have my templates in an outside file so I can have one template change cover a series of web pages. If it's jQuery-based, that's great, less stuff I have to learn, but it isn't a deal-breaker.

Answer 1

There are several good ones out there:

Mustache.js
Pure.js
Json Template

If you want a jQuery version, Tempest looks good.

Answer 2

The 2 libs I know that do not mix template coding with HTML markups are chain.js and PURE

chain makes only DOM manipulations.
PURE uses a mix of DOM and innerHTML as the DOM alone can be slow to render bigger templates.

I'm the main contributor of PURE, and we created it to build a web app on the ajax model you describe.