panini icon indicating copy to clipboard operation
panini copied to clipboard

{{root}} helper doesn't work as intended in all situations

Open vsjov opened this issue 8 years ago • 6 comments

It seems that Panini specific helper {{root}} doesn't always work as intended.

Take this folder structure for example:

/site/
  |-data/
    |-galery.yml
  |-pages/
    |-en/
      |-test_page.html

Data galery.yml is just a list of image URL's

If I use {{root}} from withing an article located in /pages/en/test-page.com and if I don't wrap it in some other Panini helpers - it will work as intended, but if I use it like this

{{#each galery.team }} <p>Image root: {{root}}</p> {{/each}}

It will not work at all.

vsjov avatar Sep 09 '17 10:09 vsjov

Could you see if writing {{../root}} works instead? Might be a Handlebars quirk.

gakimball avatar Sep 09 '17 17:09 gakimball

Doesn't that defeat the purpose of {{root}} helper? What if I put that code in a partial that could be used in files that reside in different directory levels?

It seems that path is not passed along properly with each helper.

vsjov avatar Sep 14 '17 10:09 vsjov

The ../ isn't related to the path of the root variable, it's a Handlebars thing.

Handlebars has scopes, and some helpers create a new scope. This means you can't access variables in the parent scope just by writing them normally. Adding the ../ means you want to access a variable in the parent scope.

Does that make sense?

gakimball avatar Sep 14 '17 16:09 gakimball

Yes, thank you gakimball, this makes sense. I will try it out.

vsjov avatar Sep 16 '17 17:09 vsjov

@Vlasterx did you ever find a fix for this? Having the same issue myself

bloomdigital avatar Feb 09 '20 22:02 bloomdigital

@daaanpace yes, I had to reorganize my markup and abandon the use of {{root}} in this particular case.

Data - galery.yml

-
  image: images/work/0-new/13
  title: Some title
  more: textile/new.html
-
  image: images/work/1-textile-art
  title: Some title
  more: textile/more.html
-
  image: images/work/1-prints
  title: some title
  more: prints/more.html
-
  image: images/work/0-new/21
  title: some title
  more: textile/new.html

Partial - galery-part.html

  <a href="/{{this.image}}.jpg"
     title="{{#if this.more}}<a href='/{{ this.more }}' class='galery__info'><span class='icon icon-image'></span> More</a>{{/if}}
     {{#if this.buy}}<a href='{{ this.buy }}' class='galery__buy'><span class='icon icon-cart'></span> Buy</a>{{/if}}
     {{this.title}}"><img src="/{{this.image}}_th.jpg" srcset="/{{this.image}}_th.jpg 1x, /{{this.image}}[email protected] 2x" alt="{{ this.title }}"/></a>

Page - galery.html

---
(all front-matter stuff)
---

<section class="masonry">
{{#each galery}}
  {{> galery_part}}
{{/each}}
</section>

vsjov avatar Feb 10 '20 07:02 vsjov