Handlebars limit scope of partial variable to one descendant

155 views Asked by At

Using handlebars is it possible to pass a sting from one partial to another in this manner:

Parent Template

<div class="two-col">
  {{>text-field parentclass="two-col__"}}
  {{>text-field parentclass="two-col__"}}
</div>

Child Template

<div class="{{parentclass}}text-field">
  {{>atoms-labels}}
</div>

Child of that Child

<label class="label">Label Text</label>

Will result in

<div class="two-col">
  <div class="two-col__text-field">
    <label class="label">Label Text</label>
  </div>
</div>

However, I would like to have a placeholder for a "parentclass" name in the label, in case another block (using Atomic Design here) wants to pull in that element. It would be perfect if {{parentclass}} could always be used (instead of having to come up with different placeholder names every time). However, the scope of passing down the string does not stop at the first child, it will go all the way down to the end.

So

<div class="two-col">
  {{>text-field parentclass="two-col__"}}
  {{>text-field parentclass="two-col__"}}
</div>

+

<div class="{{parentclass}}text-field">
  {{>atoms-labels}}
</div>

+

<label class="{{parentclass}}label">Label Text</label>

=

<div class="two-col">
  <div class="two-col__text-field">
    <label class="two-col__label">Label Text</label>
  </div>
</div>

Is there a way to limit the scope of that variable to be passed down only to the immediate descendant?

0

There are 0 answers