title: How do I pass variables to the template in javascript micro templating?
body: <p>John Resig has written a simple javascript templating-engine. (full code below)</p>
  
  <p>He provides a sample template with a loop:</p>
  
  <pre><code>&lt;script type="text/html" id="user_tmpl"&gt;
    &lt;% for ( var i = 0; i &lt; users.length; i++ ) { %&gt;
      &lt;li&gt;&lt;a href="&lt;%=users[i].url%&gt;"&gt;&lt;%=users[i].name%&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;% } %&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>I have succsfulle called the template, like this:</p>
  
  <pre><code>$.getJSON('/data/list.json', function(data){
      //console.log(data)
      $('.container')[0].innerHTML = tmpl("item_tmpl", data);
  })
  </code></pre>
  
  <p>What I don't understand is where I set the variables that the template uses. Here is the json I'm using:</p>
  
  <pre><code>[
      {
          "id": 1,
          "name": "Skateboard",
          "price": 1299,
          "currency": "SEK",
          "thumbnail": "/static/img/products/1-t.jpg"
      },
  
      {
          "id": 2,
          "name": "Ball",
          "price": 145,
          "currency": "SEK",
          "thumbnail": "/static/img/products/2-t.jpg"
      },
  
      {
          "id": 3,
          "name": "Dog Shampoo",
          "price": 69,
          "currency": "SEK",
          "thumbnail": "/static/img/products/3-t.jpg"
      },
  
      {
          "id": 4,
          "name": "A trip to the sun with Erik",
          "price": 29000,
          "currency": "SEK",
          "thumbnail": "/static/img/products/4-t.jpg"
      }
  ]
  </code></pre>
  
  <p>Here is the full engine:</p>
  
  <pre><code>// Simple JavaScript Templating
  // John Resig - http://ejohn.org/ - MIT Licensed
  (function(){
    var cache = {};
  
    this.tmpl = function tmpl(str, data){
      // Figure out if we're getting a template, or if we need to
      // load the template - and be sure to cache the result.
      var fn = !/\W/.test(str) ?
        cache[str] = cache[str] ||
          tmpl(document.getElementById(str).innerHTML) :
  
        // Generate a reusable function that will serve as a template
        // generator (and which will be cached).
        new Function("obj",
          "var p=[],print=function(){p.push.apply(p,arguments);};" +
  
          // Introduce the data as local variables using with(){}
          "with(obj){p.push('" +
  
          // Convert the template into pure JavaScript
          str
            .replace(/[\r\t\n]/g, " ")
            .split("&lt;%").join("\t")
            .replace(/((^|%&gt;)[^\t]*)'/g, "$1\r")
            .replace(/\t=(.*?)%&gt;/g, "',$1,'")
            .split("\t").join("');")
            .split("%&gt;").join("p.push('")
            .split("\r").join("\\'")
        + "');}return p.join('');");
  
      // Provide some basic currying to the user
      return data ? fn( data ) : fn;
    };
  })();
  </code></pre>