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"
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"