Question

I can’t figure out what I’m doing wrong in this template.

Here’s my data:

  var movies = [
  {
    "title": "The Matrix",
    "characters": ['neo', 'trinity', 'morpheous', 'agent smith'],
    "year": 2001
  },
  {
    "title": "The Simpsons Movie",
    "characters": ['homer', 'marge', 'bart', 'lisa', 'maggie'],
    "year": 20010
  }
];

Here’s my template:

<script id="template" type="template/underscore">
<% _.each(movies, function (movie) { %>
  <h1><%-title%></h1>
  <ul>
    <% _.each(characters, function(name) { %>
      <li><%-name%></li>
    <% }); %>
  </ul>
  <p><%-year%></p>
<% }); %>
</script>

And here’s the compilation:

var template = $.trim( $('#template').html() );
var content = _.template(template, movies);
console.log(content);

I’m getting the error: movies is not defined. Any help would be awesome!

Answer 1

The template is looking for the key ‘movies’ in your parameters but isn’t finding it! You need to wrap movies in a context/params var, eg:

var content = _.template(template, {movies: movies});