Passing Variables Through Handlebars Partial

Passing variables through handlebars partial

Handlebars partials take a second parameter which becomes the context for the partial:

{{> person this}}

In versions v2.0.0 alpha and later, you can also pass a hash of named parameters:

{{> person headline='Headline'}}

You can see the tests for these scenarios: https://github.com/wycats/handlebars.js/blob/ce74c36118ffed1779889d97e6a2a1028ae61510/spec/qunit_spec.js#L456-L462
https://github.com/wycats/handlebars.js/blob/e290ec24f131f89ddf2c6aeb707a4884d41c3c6d/spec/partials.js#L26-L32

handlebars: Passing variable to partial inside each

You cannot use the {{}} braces syntax to evaluate data members when you are already inside a set of braces. You can, however, simply reference the member, without wrapping it in quotes, and it will be evaluated:

{{>button btn="btn-text" addClass='-large' link=this label=this}}

You will note that my example above does not include the "letter/" prefix to the link value. Handlebars does not have a way to concatenate strings. To achieve this, you could choose one of the following options:

• Use a helper (your own or someone else's).
• Pass the prefix as an additional parameter to your partial.
• Hard-code the prefix in the partial template.
• Include the concatenated string in your template data (a-z.letters).

Passing handlebars variable as parameter to partial

It is even simpler than you thought:

{{>button classes="getting-started-button" icon="icon-rocket" text=phrases.getting_started}}

Is there a way to pass a Handlebars partial (with variables) into another helper?

At the time I asked this question, I was a bit confused with how a context was applied to a partial programmatically. Now that I've done a bit more research (I did try before asking but got nowhere), I now know that Handlebars.compile(partial) will return an object for the given partial and allow a context to be given through partial(context) which should be returned.

---

Sample Code

function escape(partial) {
    let compiledPartial = Handlebars.compile(partial);

    let context = { greeting: "Hello World!" };

    return compiledPartial(context);
}

Cannot pass variables to a partial in handlebars 3

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.

---

Related Topics