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

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>List Item 3</li>
<li><i class="fa-li fa fa-play-circle-o"></i>List Item 1</li>
<li><i class="fa-li fa fa-cog"></i>List Item 2</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>List Item 1</li>
<li><i class="fa-li fa fa-play-circle-o"></i>List Item 2</li>
<li><i class="fa-li fa fa-cog"></i>List Item 3</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>List Item 1</li>
<li><i class="fa-li fa fa-play-circle-o"></i>List Item 2</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>List Item 4</li>
<li><i class="fa-li fa fa-play-circle-o"></i>List Item 5</li>
<li><i class="fa-li fa fa-cog"></i>List Item 6</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>{{text}}</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