title: Avoid global variable on underscorejs
body: <p>I'm with a problem when using <a href="http://underscorejs.org/" rel="nofollow noreferrer">underscorejs</a>. It's not beeing possible render the template correctly. Looks like the variable passed need to be global, but is it really true? I would like to avoid this. I'm getting this error: <strong>Uncaught ReferenceError: items is not defined</strong>. If I use <em>items</em> instead of <em>var items</em>, the things work. But I would like to avoid this. How can I fix it?</p>
  
  <p>This code was adapted from this <a href="https://stackoverflow.com/a/10389847/727184">question</a>.</p>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Title&lt;/title&gt;
  
          &lt;script data-main="index" src="require.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  &lt;body&gt;
  &lt;script id='template' type="text/x-underscore"&gt;
  &lt;table cellspacing='0' cellpadding='0' border='1' &gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Id&lt;/th&gt;
          &lt;th&gt;Name&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;%
          // repeat items 
          _.each(items,function(item,key,list){
            // create variables
            var f = item.name.split("").shift().toLowerCase();
        %&gt;
          &lt;tr&gt;
            &lt;!-- use variables --&gt;
            &lt;td&gt;&lt;%= key %&gt;&lt;/td&gt;
            &lt;td class="&lt;%= f %&gt;"&gt;
              &lt;!-- use %- to inject un-sanitized user input (see 'Demo of XSS hack') --&gt;
              &lt;h3&gt;&lt;%- item.name %&gt;&lt;/h3&gt;
              &lt;p&gt;&lt;%- item.interests %&gt;&lt;/p&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;%
          });
        %&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/script&gt;
  
  &lt;div id="target"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>index.js:</strong></p>
  
  <pre><code>var application = {
      initialize: function() {
        this.load();
      },
      jsPool: [
       'jquery-1.11.2.min.js',
       'underscore-min.js',
      ],
      load: function() {
        define(
          this.jsPool,
          this.onReady
        );
      },
      onReady: function() {
        render();
      }
  };
  
  application.initialize();
  
  function render() {
    var items = [
        {name:"Alexander"},
        {name:"Barklay"},
        {name:"Chester"},
        {name:"Domingo"},
        {name:"Edward"},
        {name:"..."},
        {name:"Yolando"},
        {name:"Zachary"}
    ];
  
    var template = $("#template").html();
    $("#target").html(_.template(template,{items:items}));
  }
  </code></pre>