3

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"

1
  • 1
    I'm working through something different yet similar.. great to find this on here!
    – Damon
    Mar 19, 2015 at 0:50

1 Answer 1

2

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"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.