Use dynamic partials

[davidmondok]

Is there a way to use dynamic partials in my components? Basically I want to reference a partial name in a value I pull from the data in one of my yml files. Something like this:

In a yml file I have: "icon: icons.foo" In my component: {{> (lookup . 'this.icon') }} ("this" because I loop through several elements)

Unfortunately this doesn't work and I everything I tried was a failure.

[LukeAskew]

I believe this is what you're looking for:

{{material "icons.foo"}}

[davidmondok]

Thanks a lot for your input @LukeAskew. Unfortunately that didn't work, but I got a step further. Maybe I explain the use case a bit more in detail with a better example:

I have a component that renders a list with an SVG Icon and some text. Each icon is a component itself that contains markdown for an SVG element. I want to reference those components via a variable in my yml file (see below)

<ul>
  {{#each list}}
    <li>
      <span class="icon">{{material 'this.icon'}}</span>
      <span class="text">{{this.text}}</span>
    </li>
  {{/each}}
</ul>

This is my list.yml where I pull the data from. The variable icon is the reference to one of the icon components in the folder materials/components/icons/... (icon1.html and icon2.html)

1:
  text: Lorem ipsum
  icon: icons.icon1
2:
  text: Ipsum Lorem
  icon: icons.icon2

When I run this I get an error though "You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined"

[james-dowell]

Hi @LukeAskew,

First off, big fan of fabricator and have been using it for the last few projects I've worked on.

Is there any news on this yet/is there anything I can do to help out on this? Similarly to @genmacg I attempted to dynamically load a partial by passing down a value into the partial, like so:

{{> form.form-wrapper step="form.step-review-details" }}

Then in the form-wrapper.html material include the 'step-review-details' partial within some of the markup, like so:

<div class="form__body">
    {{material step }}
</div>

Or something to that effect, hopefully that makes sense. I too have tried a few variations of this, including just attempting {{material "form.step-review-details" }} but continued received the error: You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined

Thanks in advance,

[LukeAskew]

Still not totally sure what the solution here is. For icons, the pattern we've used in the past is to have a single "icon" pattern that accepts an id parameter:

<div>
  {{> icon id="some-icon"}}
</div>

The icon partial then looks something like this:

<svg aria-hidden="true" class="icon" role="img">
  <use xlink:href="#{{id}}" />
</svg>

In this example, we have a separate SVG sprite that the xlink:href anchor points to.

This approach might not work in all cases, but hopefully it inspires a different approach. that works.

Closing because I think this functionality is a bit out of scope for Fabricator.