How to use underscore.js as a template engine?

Embedding in HTML

In the world of underscore.js templates, consider <script> tags as your new best friend. Wrap your templates within script tags, while assigning the type attribute as "text/template":

<script type="text/template" id="myTemplate">
  <h2><%= heading %></h2>
  <p><%= content %></p>
</script>


Akin to an HTML treasure hunter, you can fetch these embedded templates later with the help of our favorite sidekick – jQuery's .html() – or DOM-based methods, and apply _.template method to spin the magic.

Making it your own

Underscore.js requires no ring to rule them all. If you disagree with its choice of delimiters, use your own! _.templateSettings comes to your rescue:

_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;
var compiled = _.template('<div>{{ title }}</div>');


This neat trick allows you to switch <%= title %> with {{ title }}.

Prior Preparation Prevents Poor Performance

Who loves freezing browsers? No one. Pre-compile your templates for optimal app performance, especially when wrestling with convoluted structures or running a marathon with the same template:

var precompiledTemplate = _.template($('#myTemplate').html());

$('#container').html(precompiledTemplate({ heading: 'Performance Matters', content: 'Pre-compiled for Nitro speed.' }));


The browser can keep calm and carry on, as there is no need to compile your template repeatedly.

The expert approach

Deep dive into underscore templating with power-packed elements of regex for complex replacement patterns, and further personally define your template's behavior with evaluate, interpolate, and escape settings in _.template.

Conciseness is the sibling of talent. Incorporate Mustache style syntax to cut down verbosity and use the template variable parameter for direct data referencing, especially while dealing with Godzilla-sized datasets or the JSON labyrinth.

Exploring the neighborhood

The coding universe is vast. Apply your explorer hat and journey across other template engines like Mustache.js, Handlebars.js, et al. The distinct features will expand your inventory and breed an appreciation for the strengths of each engine.

Alternative scenes

Not a fan of traditional paths? Try laconic.js! It offers a revolutionary approach to DOM building, enabling you to specify your HTML structures in a programmatic, concise, and expressive manner.

Safety first

To keep the XSS monster at bay, always use <%- %> to escape user-supplied data before injecting it into the document:

var templateString = '<h1><%- title %></h1>';
_.template(templateString)({ title: '<script>alert("Unsafe!")</script>' });
// Result: <h1>&lt;script&gt;alert("Unsafe!")&lt;/script&gt;</h1>


This check is paramount when dealing with un-sanitized user inputs and keeps your templates safe from any potential vulnerabilities.