How to use templates via Handlebars.precompile (vs CLI)

Question

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.

For example, we'll take a basic template (called Stuff.handlebars):

{{!-- begin template --}}
    <strong> {{test}} </strong>
{{!-- end template --}}

Here is the output using Handlebars.precompile :

function (Handlebars, depth0, helpers, partials, data) {
    this.compilerInfo = [4, '>= 1.0.0'];
    helpers = this.merge(helpers, Handlebars.helpers);
    data = data || {};
    var buffer = "",
        stack1, helper, functionType = "function",
        escapeExpression = this.escapeExpression;


    buffer += "<strong> ";
    if (helper = helpers.test) {
        stack1 = helper.call(depth0, {
            hash: {},
            data: data
        });
    } else {
        helper = (depth0 && depth0.test);
        stack1 = typeof helper === functionType ? helper.call(depth0, {
            hash: {},
            data: data
        }) : helper;
    }
    buffer += escapeExpression(stack1) + " </strong>";
    return buffer;
}

When ran through the node.js handlebars compiler ( handlebars stuff.handlebars -f test.js ), the output is as follows:

(function () {
    var template = Handlebars.template,
        templates = Handlebars.templates = Handlebars.templates || {};
    templates['stuff'] = template({
        "compiler": [5, ">= 2.0.0"],
        "main": function (depth0, helpers, partials, data) {
            var helper, functionType = "function",
                escapeExpression = this.escapeExpression;
            return "\r\n    <strong> " + escapeExpression(((helper = helpers.test || (depth0 && depth0.test)), (typeof helper === functionType ? helper.call(depth0, {
                "name": "test",
                "hash": {},
                "data": data
            }) : helper))) + " </strong>\r\n";
        },
        "useData": true
    });
})();

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 App.Templates.mytemplatename = ...output of handlebars.precompile(source)... ?

So, for example to set a template I am:

var foo = $("#foo");
$(foo).html(Handlebars.template(App.Templates.Stuff));

This outputs correctly minus data. How do I pass data into this?

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).

Edit: OK, I've found the answer.

Using our above example, I created an object called "testObj":

testObj = { test: "foo bar" };

Next, I assigned the Handlebars.template() call to a variable:

var template = Handlebars.template(App.Template.Stuff);

Finally, I passed the object in as a parameter:

template(testObj);

The output of which is: "foo bar"

Answer 1

Using our above example, I created an object called "testObj":

testObj = { test: "foo bar" };

Next, I assigned the Handlebars.template() call to a variable:

var template = Handlebars.template(App.Template.Stuff);

Finally, I passed the object in as a parameter:

template(testObj);

The output of which is: "foo bar"