handlebars partial block as a code template

Question

I use gulp for precompiling .hbs.

The code inside the blocks must be inserted into several places. The problem here is that instead of the right value, this is assigned undefined:

Cannot read property 'match' of undefined

{{#>simpleName}}
{{getSimpleName (lookup ../this @key)}}
{{/simpleName}}

<ul class='{{list-votes}}'>
    {{#each list-items}}
        <hr/>
        <li>
            {{@key}}
            {{#each this}}
                <figure class='{{ @simpleName}}'>
                    <img class="{{getSimpleName (lookup ../this @key)}}__img" src="./images/{{getSimpleName .}}.png" alt="{{.}}" width="48" height="48"/>
                    <figcaption class="title header__title">{{.}}</figcaption>
                </figure>
            {{/each}}
        </li>
    {{/each}}
</ul>

getSimpleName - helper js-function, it returns a changed string.

Can't I use {{getSimpleName (lookup ../this @key)}} inside partial blocks?

Answer 1

You can use this inside a Partial View. Below is my code and it works.

MyList:

const list = [
    {
      name: "A:FN",
      ln: "A:LN"
    },
    {
      name: "B:FN",
      ln: "B:LN"
    }
  ]

Master View (list.handlebars):

{{#each list}}
  {{> sample}}

  From Master: LN: {{getSimpleName this.ln}} <hr/>
{{/each}}

Partial View (sample.handlebars):

From Partial: Name: {{getSimpleName this.name}} <br/>

Final Result:

From Partial: Name: A:FN:ADDED 
From Master: LN: A:LN:ADDED
------------------
From Partial: Name: B:FN:ADDED 
From Master: LN: B:LN:ADDED
------------------

I hope you are having a specific problem with lookup.

Alternatively you can achieve this with inline partials:

{{#*inline "sample"}}
  From Partial: Name: {{getSimpleName this.name}} <br/>
{{/inline}}


{{#each list}}
  {{> sample }}

  From Master: LN: {{getSimpleName this.ln}} <hr/>
{{/each}}