Search code examples
templateshandlebars.jsgruntjsassemble

Accessing global variables from inside a loop with Assemble


using Grunt.js 0.4 and Assemble 0.3.78

how can I access 'page.filename' global variable from inside a loop?

(debug)

<ul>
  {{#mysite.menu}}
    <li>{{page.filename}}</li>
  {{/mysite.menu}}
</ul>

(actually) building a menu, trying this:

{{#mysite.menu}}
  <li {{#is page.filename url}} class="on" {{/is}}>{{name}}</li>
{{/mysite.menu}}

where url and name are attributes of each mysite.menu


Solution

  • It would help to have a little more information than what you provided, like an example of the data you're using. But I'll try to answer if I can. To clarify, page and filename are both built-in "helpers"/variables in Assemble, filename is one of several "path" helpers, here are some others:

    • dirname: Returns the absolute path to the given file/directory. Would return: path/to/variables.md. Usage: {{dirname [path]}}
    • pagename: Returns the full-name of a given file. Would return: variables.md. Usage: {{filename "docs/toc.md"}}
    • filename: Can be used as an alternate for pagename.
    • basename: Returns the basename of a given file. Would return: variables Usage: {{base "docs/toc.md"}}
    • extension: Returns the extension of a given file. Would return: .md Usage: {{extension "docs/toc.md"}}
    • ext: Can be used as an alternate forextension.
    • relative: Returns the derived relative path from file A to file B. Usage: {{relative [from] [to]}}.

    These can be used with page like this:

    {{page.dest}}
    {{page.absolute}}
    {{page.dirname}}
    {{page.filename}}
    {{page.pagename}}
    {{page.basename}}
    {{page.extname}}
    {{page.ext}}
    

    or, depending on context and what you need:

    {{this.dest}}
    {{this.dirname}}
    {{this.filename}}
    {{this.pagename}}
    {{this.basename}}
    {{this.extname}}
    {{this.ext}}
    

    When you use the templates inside of {{#each}} blocks like in your example, you will need to add ../ to go up a level of context:

    {{../page.dest}}
    {{../page.absolute}}
    {{../page.dirname}}
    {{../page.filename}}
    {{../page.pagename}}
    {{../page.basename}}
    {{../page.extname}}
    {{../page.ext}}
    

    or, again depending on what else is on your page. (I have no idea how much nesting is going on in the rest of the templates, etc.)

    {{../dest}}
    {{../absolute}}
    {{../dirname}}
    {{../filename}}
    {{../pagename}}
    {{../basename}}
    {{../extname}}
    {{../ext}}
    

    My recommendation is that you just copy/paste all of the templates I listed into a page and build it. Then look at the results and see which templates are working and it should help you start wrapping your brain around how the templates are working. Context with Handlebars is confusing at first, but hopefully this will help.

    Also, if you're still having trouble after that maybe take a look at some of the "assemble-examples" repos and try to get your templates/pages building first without any of these helpers. Then commit your work and introduce the helpers, but not just one or two helpers at a time, when I was learning I started adding dozens of helpers to a page just to speed up the process of seeing what happened in the output, what broke, look at diffs to see what changed. etc.

    Let me know if this at least gets you somewhere. I'm happy to keep helping.