javascript - 灰尘模板包含多次

Question

很确定这是不可能的，但以防万一，比我聪明的人已经弄明白了..

我有一组非常相似的灰尘模板，比如:

<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>

这看起来非常低效，继承机制是通过 copypasta。

理想情况下，我想在有模板的地方做一些事情，例如fieldset.dust:

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

...并在顶级模板中多次调用它，它可能看起来像这样:

<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> 

当然，这最终只会用字段集二的内容渲染字段集一。

我尝试了显而易见的方法，但失败了:

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

甚至考虑过在模板渲染时通过 javascript 传递自定义上下文，但这似乎非常难以维护，最终只会渲染一个模板作为内容传递给另一个模板，我不得不相信这是低效和 hacky 的。

那么有没有办法实现我想要的呢？或者这完全是错误的方法，并且有更好的方法在灰尘模板中获取 DRY？

----更新----

当然，理想情况下 class="field"div 也可以通过基本模板呈现，但我希望让示例保持简单。

Answer 1

在 https://github.com/rragan/dust-motes/tree/master/src/helpers/html/layout 中尝试我的@layout 助手.也可以通过 npm install dustmotes-layout 获得。

我只是对其进行了增强，我一直在考虑这样做以允许将参数传递给布局。这使您的案件更容易处理。我试过这个例子，它看起来很像你的需要:

fieldset.dust

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

fieldset_body.dust

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

和主模板

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

我得到的输出是:

<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>