Search code examples
yamldrytemplatingassemble

DRY partials with Assemble.io front-matter


I'm wondering how to make re-usable html partials with Assemble.

What I would like to do is just simply override front-matter of my new template that references the component I want. See below:

Below is my-list.hbs(references my-list.yml)

    ---
    horiz-list: "<%= my-list %>"
    ---
    {{> horiz-list}}

Below is horiz-list.hbs(references horiz-list.yml)

   <ul class="horiz-list">
     {{#each horiz-list}}
     <li>{{.}}</li>
     {{/each}}
   </li>

Yml files are just lists of things like bananas, apples, oranges, or whatever.

I thought this would work, but it doesn't.

NOTE: The only thing I have seen about re-usable components so far is a stack-overflow that talked about extending the page using handlebars, but I couldn't find that this morning, and when I read it, it didn't seem like a straight-forward process.

Any help from the community would be much appreciated, given that assemble has some really nice features.

Thanks!


Solution

  • Okay, so... Trying to override data like this won't work, because it has a rigid order to how contexts are put together.

    Thankfully, someone has already solved this problem for all of us.

    This(below) is what I meant by "extending the page using handlebars"... It basically makes contexts in partials more flexible with data.

    https://github.com/albogdano/handlebars-helper-mdpartial

    There is also a node package that works with this to put keys for all the partials, and adds even more flexibility.

    https://www.npmjs.org/package/assemble-partial-data