Assemble.io (handlebars.js) Partials Context/Variables

Question

Not sure if the is the appropriate use of handlebars - I've been digging around the web and haven't come up with much. Anyway, I'm using assemble.io and trying to set up a partial to repeat around my site. I have a moduleResources.hbs in my /partials directory. Inside that I have this code:

 <div class="dvp-content-well">
  <div class="content-well-inner">
      <h4>Related Resources</h3>
      <ul class="fa-ul">
          <li><i class="fa-li fa fa-file-o"></i><a href="#">List Item 3</a></li>
          <li><i class="fa-li fa fa-play-circle-o"></i><a href="#">List Item 1</a></li>
          <li><i class="fa-li fa fa-cog"></i><a href="#">List Item 2</a></li>
      </ul>
  </div>
</div>

That code block could be called one to two times on a page. Basically, what I need to do is change the content of the <h4> and <ul> dynamically. And was hoping I could do so when calling the partial on the page. So like {{> moduleResources relatedResources }}

Like having all the HTML in the partial but changing it based on context like:

<div class="dvp-content-well">
  <div class="content-well-inner">
    <!-- IF Related -->
    <h4>Related Resources</h4>
    <ul class="fa-ul">
        <li><i class="fa-li fa fa-file-o"></i><a href="#">List Item 1</a></li>
        <li><i class="fa-li fa fa-play-circle-o"></i><a href="#">List Item 2</a></li>
        <li><i class="fa-li fa fa-cog"></i><a href="#">List Item 3</a></li>
    </ul>

    <!-- If Mentioned -->
    <h4>Resources Mentioned in this Article</h4>
      <ul class="fa-ul">
          <li><i class="fa-li fa fa-file-o"></i><a href="#">List Item 1</a></li>
          <li><i class="fa-li fa fa-play-circle-o"></i><a href="#">List Item 2</a></li>
          <li><i class="fa-li fa fa-cog"></i><a href="#">List Item 3/a></li>
          <li><i class="fa-li fa fa-file-o"></i><a href="#">List Item 4</a></li>
          <li><i class="fa-li fa fa-play-circle-o"></i><a href="#">List Item 5</a></li>
          <li><i class="fa-li fa fa-cog"></i><a href="#">List Item 6</a></li>
      </ul>

  </div>
</div>

I had originally set YAML variables like resources-title: Related Resources but you can see if I use the module twice and each version needs to have a different title (and ul content) ... what then?

Is that even a reasonable use scenario for handlebars/assemble?

Thanks!

Answer 1

I think what you're thinking is correct. You can pass a different context to the partial and use handlebars templates to populate the html based on the context. You might even want to split it down to smaller pieces:

{{!list-item.hbs}}
<li><i class="fa-li fa fa-{{icon}}"></i><a href="{{url}}">{{text}}</a></li>



{{!list.hbs}}
<ul class="fa-ul">
  {{#each items}}{{> list-item . }}{{/each}}
</ul>



{{!resources.hbs}}
<div class="dvp-content-well">
  <div class="content-well-inner">
    <h4>{{title}}</h4>
    {{> list .}}
  </div>
</div>



{{!my-page.hbs}}
{{> resources resources.related}}
{{> resources resources.mentioned}}



# resources.yml
related:
  title: Related Resources
  items:
    -
      icon: file-o
      url: "#"
      text: List Item 1
    -
      icon: play-circle-o
      url: "#"
      text: List Item 2
    -
      icon: fa-cog
      url: "#"
      text: List Item 3

mentioned:
  title: Resources Mentioned in this Article
    -
      icon: file-o
      url: "#"
      text: List Item 1
    -
      icon: play-circle-o
      url: "#"
      text: List Item 2
    -
      icon: fa-cog
      url: "#"
      text: List Item 3
    -
      icon: file-o
      url: "#"
      text: List Item 4
    -
      icon: play-circle-o
      url: "#"
      text: List Item 5
    -
      icon: fa-cog
      url: "#"
      text: List Item 6