2014-02-23 74 views
1

很肯定這是不可能的,但以防萬一它是有人比我聰明有它想通了..防塵模板多次包括

我有非常相似的灰塵模板的集合,是這樣的:

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

但是,當然,這只是最終渲染字段集一個與字段集2的內容。

我已經嘗試了很明顯,但未能:

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

,甚至考慮通過JavaScript在模板傳遞自定義背景渲染時間,但似乎可怕的難以維護和剛剛結束的渲染模板爲通過內容到另一個模板,我不得不相信這是效率低下和冒險的。

那麼有沒有辦法實現我想要的?或者這是完全錯誤的方法,在灰塵模板中有更好的方法來獲得DRY?

---- ----更新

當然,最好的類=「場」的div將通過基本模板也呈現,但我希望能保持我的例子很簡單。

回答

2

試試我的@layout幫手https://github.com/rragan/dust-motes/tree/master/src/helpers/html/layout。也可以通過npm安裝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> 
+0

會給它一個嘗試 - 謝謝! – tbm

+0

layout.js似乎失敗 var base = dust.helpers.tap(params.base,chk,ctx), 其中dust.helpers.tap未定義。我究竟做錯了什麼?我有在layout.js上面導入的鏈接灰塵助手 – tbm