CODEWITHSUNDEEP
javascripttemplatesinheritanceextenddust.js
tbm
tbm

Reputation: 1211

Dust template included multiple times

Pretty sure this isn't possible, but just in case it is and someone smarter than me has it figured out..

I have a collection of very similar dust templates, something like:

<div id="some_id" class="inner funform">
  <form id="form_id" action="/do/something">
      <fieldset class="foo">
        <div class="field"><input .../></div>
        <div class="field"><input .../></div>
        <div class="field"><input .../></div>
      </fieldset>

      <fieldset class="bar">
        <div class="field"><input .../></div>
        <div class="field"><input .../></div>
        <div class="field"><input .../></div>
      </fieldset>
</div>

which seems incredibly inefficient, and the inheritance mechanism is via copypasta.

Ideally I'd like to do something where I have a template e.g. fieldset.dust:

<fieldset class="{+fieldset_class}">
</fieldset>

...and call that multiple times within a top-level template, which might look something like this:

<div id="some_id" class="inner funform">
    <form id="form_id" action="/do/something">
        <!-- Here's the magic -->

        {>"fieldset.dust"/}
        {<fieldset_class}fieldset_one{/fieldset_class}
        <div class="field"><input/></div>
        <div class="field"><input/></div>
        <div class="field"><input/></div>

        {>"fieldset.dust"/}
        {<fieldset_class}fieldset_two{/fieldset_class}
        <div class="field"><input/></div>
        <div class="field"><input/></div>
        <div class="field"><input/></div>

        <!-- end magic -->
    </form>
</div>

But of course this just ends up rendering fieldset one with the contents of fieldset two.

I've tried the obvious, but failing:

{>"fieldset.dust"}
    fieldset content here..
{/"fieldset.dust"}

and even considered passing in custom contexts via javascript at template render time, but that seems horribly unmaintainable and just ends up rendering a template to pass as contents to another template, which I have to believe is inefficient and hacky.

So is there a way to achieve what I want? Or is this the wrong approach completely, and there's A Better Way to obtain DRY within dust templates?

---- Update ----

Of course, ideally the class="field" divs would be rendered via a base template also, but I was hoping to keep my examples simple.

Upvotes: 1

Views: 182

Answers (1)

rragan
rragan

Reputation: 484

Try my @layout helper in https://github.com/rragan/dust-motes/tree/master/src/helpers/html/layout. Also available via npm install dustmotes-layout.

I just made an enhancement to it that I had been thinking of doing to allow parameters to be passed to the layouts. This makes your case easier to handle. I tried this example which seems rather like your needs:

fieldset.dust

<fieldset class="{name}">
{@layout base="fieldset_body"/}
</fieldset>

fieldset_body.dust

<div class="{bodyClass}"><input></div>

And the main template

{@layout base="fieldset" name="foo" bodyClass="body1"}{/layout}
{@layout base="fieldset" name="bar" bodyClass="body2"}{/layout}

The output I got was:

<fieldset class="foo"><div class="body1"><input></div><div class="body1"><input></div></fieldset><fieldset class="bar"><div class="body2"><input></div><div class="body2"><input></div></fieldset>

Upvotes: 2

Related Questions