How to use underscore.js as a template engine?

Everything you need to know about underscore template is here. Only 3 things to keep in mind:

1. <% %> - to execute some code
2. <%= %> - to print some value in template
3. <%- %> - to print some values HTML escaped

That's all about it.

Simple example:

var tpl = _.template("<h1>Some text: <%= foo %></h1>");

then tpl({foo: "blahblah"}) would be rendered to the string <h1>Some text: blahblah</h1>

<!-- Install jQuery and underscore --><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script><script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script><!-- Create your template --><script type="foo/bar" id='usageList'><table cellspacing='0' cellpadding='0' border='1' >    <thead>      <tr>        <th>Id</th>        <th>Name</th>      </tr>    </thead>    <tbody>      <%        // repeat items         _.each(items,function(item,key,list){          // create variables          var f = item.name.split("").shift().toLowerCase();      %>        <tr>          <!-- use variables -->          <td><%= key %></td>          <td class="<%= f %>">            <!-- use %- to inject un-sanitized user input (see 'Demo of XSS hack') -->            <h3><%- item.name %></h3>            <p><%- item.interests %></p>          </td>        </tr>      <%        });      %>    </tbody>  </table></script><!-- Create your target --><div id="target"></div><!-- Write some code to fetch the data and apply template --><script type="text/javascript">  var items = [    {name:"Alexander", interests:"creating large empires"},    {name:"Edward", interests:"ha.ckers.org <\nBGSOUND SRC=\"javascript:alert('XSS');\">"},    {name:"..."},    {name:"Yolando", interests:"working out"},    {name:"Zachary", interests:"picking flowers for Angela"}  ];  var template = $("#usageList").html();  $("#target").html(_.template(template,{items:items}));</script>

• JsFiddle Thanks @PHearst!
• JsFiddle (latest)
• JsFiddle List grouped by first letter (complex example w/ images, function calls, sub-templates) fork it! have a blast...
• JsFiddle Demo of XSS hack noted by @tarun_telang below
• JsFiddle One non-standard method to do sub-templates

In it's simplest form you would use it like:

var html = _.template('<li><%= name %></li>', { name: 'John Smith' });//html is now '<li>John Smith</li>'   

If you're going to be using a template a few times you'll want to compile it so it's faster:

var template = _.template('<li><%= name %></li>');var html = [];for (var key in names) {    html += template({ name: names[i] });}console.log(html.join('')); //Outputs a string of <li> items

I personally prefer the Mustache style syntax. You can adjust the template token markers to use double curly braces:

_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;var template = _.template('<li>{{ name }}</li>');