Cannot pass variables to a partial in handlebars 3

Question

Tried to pass variable to a partial without success.

---

Try 1: passing template context

"product" template:

From template: {{product.name}} 
<br>
{{> product_buttons}}

"product_buttons" partial:

From partial: {{product.name}}

Output:

From template: Awesome Steel Shoes
<br>
[object Object]
From partial: 

We can see 2 problems:

• the partial does not render the expected value. I also tried to render the template with {{> product_buttons this} and {{> product_buttons product=product} for the exact same result
• [object Object]is inserted in the output

---

Try 2: passing hash variable

"product" template:

From template: {{product.name}} 
<br>
{{> product_buttons thename=product.name}}

"product_buttons" partial:

From partial: {{thename}}

This raises the error Uncaught TypeError: Cannot read property 'thename' of undefined at the following line from the compiled partial:

return "From partial: "
+ this.escapeExpression(((helper = (helper = helpers.thename || (depth0 != null ? depth0.thename : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0,{"name":"thename","hash":{},"data":data}) : helper)))
                                                     ^--- Error is from here
+ "";

---

Additional notes

I pre-compile the templates with command line handlebars utility. I use handlebars 3.0.3 installed from npm, but the output of handlebars -vis "3.0.1" strangely. I checked paths and installations and cannot fix that either

Compilation command:

handlebars directory/*.handlebars -f file_name.tmpl.js

Template usage example:

Handlebars.registerPartial('product_buttons', Handlebars.templates.product_buttons);
product = {name: 'test'};
html = Handlebars.templates.product({product: product});

Any help will be greatly appreciated. Thanks

Answer 1

I did the following steps to verify your example. First I created the two templates:

$ cat directory/product.handlebars 
From template: {{product.name}} 
<br>
{{> product_buttons}}

$ cat directory/product_buttons.handlebars
From partial: {{product.name}}

Then I compiled them

$ handlebars directory/*.handlebars -f file_name.tmpl.js

and got file_name.tmpl.js:

(function() {
  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
templates['product_buttons'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
    var stack1;

  return "From partial: "
    + this.escapeExpression(this.lambda(((stack1 = (depth0 != null ? depth0.product : depth0)) != null ? stack1.name : stack1), depth0));
},"useData":true});
templates['product'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
    var stack1;

  return "From template: "
    + this.escapeExpression(this.lambda(((stack1 = (depth0 != null ? depth0.product : depth0)) != null ? stack1.name : stack1), depth0))
    + " \n<br>\n"
    + ((stack1 = this.invokePartial(partials.product_buttons,depth0,{"name":"product_buttons","data":data,"helpers":helpers,"partials":partials})) != null ? stack1 : "");
},"usePartial":true,"useData":true});
})();

I then included file_name.tmpl.js in my index.html and rendered the template like this

Handlebars.registerPartial('product_buttons', Handlebars.templates.product_buttons);
var context = {product: {name: 'My product'}};
html = Handlebars.templates.product(context);
console.log(html);

giving me this console output:

From template: My product 
<br>
From partial: My product

I saw that you did not set a context to your product template. But I guess this is just missing in your example, right?

Can you please verify (and post if different) the content of your file_name.tmpl.js?

Btw: My version of handlebars is 3.0.1 as well:

$ handlebars -v
3.0.1

I created a plnkr using the file_name.tmpl.js.