handlebars partial block as a code template - handlebars.js

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