title: How to use templates via Handlebars.precompile (vs CLI)
body: <p>I'm in a .NET environment where we cannot use Node.js (requirements, silly things). We have a custom Backbone application and are using Handlebars for client side templates. Due to restrictions in this project, we're manually precompiling all of the templates with Handlebars.precompile. I've done some google-fu and searched through Stackoverflow but have not seen much useful documentation on Handlebars.precompile (the output from this is different from using the CLI tool). My issue is this: once I precompile the the Handlebars templates programmatically, how are they to be used? This implementation does not add them to the Handlebars.templates namespace.</p>
  
  <p>For example, we'll take a basic template (called Stuff.handlebars):</p>
  
  <pre><code>{{!-- begin template --}}
      &lt;strong&gt; {{test}} &lt;/strong&gt;
  {{!-- end template --}}
  </code></pre>
  
  <p>Here is the output using <code>Handlebars.precompile</code>:</p>
  
  <pre><code>function (Handlebars, depth0, helpers, partials, data) {
      this.compilerInfo = [4, '&gt;= 1.0.0'];
      helpers = this.merge(helpers, Handlebars.helpers);
      data = data || {};
      var buffer = "",
          stack1, helper, functionType = "function",
          escapeExpression = this.escapeExpression;
  
  
      buffer += "&lt;strong&gt; ";
      if (helper = helpers.test) {
          stack1 = helper.call(depth0, {
              hash: {},
              data: data
          });
      } else {
          helper = (depth0 &amp;&amp; depth0.test);
          stack1 = typeof helper === functionType ? helper.call(depth0, {
              hash: {},
              data: data
          }) : helper;
      }
      buffer += escapeExpression(stack1) + " &lt;/strong&gt;";
      return buffer;
  }
  </code></pre>
  
  <p>When ran through the node.js handlebars compiler (<code>handlebars stuff.handlebars -f test.js</code>), the output is as follows:</p>
  
  <pre><code>(function () {
      var template = Handlebars.template,
          templates = Handlebars.templates = Handlebars.templates || {};
      templates['stuff'] = template({
          "compiler": [5, "&gt;= 2.0.0"],
          "main": function (depth0, helpers, partials, data) {
              var helper, functionType = "function",
                  escapeExpression = this.escapeExpression;
              return "\r\n    &lt;strong&gt; " + escapeExpression(((helper = helpers.test || (depth0 &amp;&amp; depth0.test)), (typeof helper === functionType ? helper.call(depth0, {
                  "name": "test",
                  "hash": {},
                  "data": data
              }) : helper))) + " &lt;/strong&gt;\r\n";
          },
          "useData": true
      });
  })();
  </code></pre>
  
  <p>My problem is this: how do I appropriate use the programmatically created Handlebars templates and pass data into them? I am currently having them namespaced to <code>App.Templates.mytemplatename = ...output of handlebars.precompile(source)...</code> ?</p>
  
  <p>So, for example to set a template I am:</p>
  
  <pre><code>var foo = $("#foo");
  $(foo).html(Handlebars.template(App.Templates.Stuff));
  </code></pre>
  
  <p>This outputs correctly minus data. How do I pass data into this? </p>
  
  <p>Keep in mind that I am only using the handlebars.runtime.js library on the page that I'm attempting to pass data through (otherwise I wouldn't be going through all of these steps).</p>
  
  <p><strong>Edit: OK, I've found the answer.</strong> </p>
  
  <p>Using our above example, I created an object called "testObj":</p>
  
  <pre><code>testObj = { test: "foo bar" };
  </code></pre>
  
  <p>Next, I assigned the Handlebars.template() call to a variable:</p>
  
  <pre><code>var template = Handlebars.template(App.Template.Stuff);
  </code></pre>
  
  <p>Finally, I passed the object in as a parameter:</p>
  
  <pre><code>template(testObj);
  </code></pre>
  
  <p>The output of which is: <code>"foo bar"</code></p>