Search code examples
handlebars.jsassemble

Assemble.io - Looping around a YAML List : {{each}} vs {{eachProperty}}

If I have a YAML list, e.g:

Home : / Terms and Conditions : /terms.html

And I want to render some content from that list, but make use of both keys & values, I'm having to use {{eachProperty}} to get those values, i.e :

{{#eachProperty this.value}}

  • {{key}}
    • {{/eachProperty}}

    Anyone got any better ideas?

    Solution

  • I think you just need to add another layer to your YAML data structure, so you have a list of pages, where each page is an object that has both a title and url property you can reference in the template. In the example below, I put the YAML at the top of the Handlebars template, but it should work the same if loaded from an external file.

    ---
links:
  Home:
    url: '/'
    title: 'Home'
  Terms:
    url: '/terms.html'
    title: 'Terms and Conditions'
---
<!DOCTYPE html>
<html>
<body>
<h1>Test List of Links</h1>
<ul>
    {{#each links}}
        <li><a href="{{url}}">{{title}}</a></li>
    {{/each}}
</ul>
</body>
</html>