We covered templating with Handlebars in the last video. But Handlebars isn't the only templating solution on the block. In this video we'll use the templating available in Underscore.

Why? Well one reason is that you might already be using Underscore on your project. It's an extremely popular library because, like jQuery, it provides a bunch of useful methods that work cross-browser. As they say:

It's the tie to go along with jQuery's tux, and Backbone.js's suspenders.

If you're already using Underscore, that would be a big incentive to use it's templating.

Also in my quick testing, Handlebars 1.0.0 is 14.2 KB gzipped and minified and Underscore is 4.9 KB gzipped and minified. Handlebars simply has more features (e.g. commenting, loops, paths, logic, etc). In our simple demo, we don't need those features anyway, so it's not exactly a fair comparison, but oh well we're just learning.

Rather than having the template in the HTML, we need to define Underscore templates in the JavaScript. We're back to some string concatenation.

var compiled = _.template(
  "<div class='module module-movie' style='background-image: url(<%= movieImage %>)'>" + 
    "<div class='movie-info'>" +
      "<h3 class='movie-title'>" +
         "<%= movieTitle %>" + 
      "</h3>" +
      "<p class='movie-director'>" + 
         "<%= movieDirector %>" + 
      "</p>" + 
    "</div>" + 
  "</div>"
);

compiled then turns into a function we can call with our data object context and returns the HTML all filled out with that data. To be efficient, we're going to concatenate the HTML that returns into one big string so we can append it to the DOM just once:

  var i, html = "";
  for (i = 0; i < data.movies.length; i++) {
    html += compiled(data.movies[i]);
  }  
  $("#movies").append(html);

In this video we also abstracted away the getting of the data. We created a JSON source, and used jQuery's $.getJSON() function to get it. Like we would probably have to do in "real life".

$.getJSON("/path/to/json.js", function(data) {

});

Our for loop and such that relies on that data goes in the callback there. Or more likely, calls some other well-named function to handle that, keeping things cleanly separated.

Here's where we ended up:

See the Pen IpAdn by Chris Coyier (@chriscoyier) on CodePen

It should be noted that LoDash is 100% compatible with what we've done here. I'm not quite sure if LoDash templating is any better/faster/slower/worse than Underscore's, but I swapped out the libraries and the demo worked just fine.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag