2013-01-25 99 views
0

我使用Mustache作爲HTML模板並將HoganJS用作呈現器。我的問題如下: 我有表模板(表,標題,正文),但我也有TBODY的每個TR元素的模板。我想要的只是在TABLE模板中重用TR模板。將鬍子模板嵌入到另一個模板中

是否可能?

示例代碼:

<!-- Row Template --> 
<script type="text/html" id="table_row_template"> 
<tr> 
    <td><input type="text" name="Name" class="item-name autocomplete-groups" value="{{name}}" /></td> 
    <td><input type="text" name="count" class="item-count count" name="count" value="{{count}}" /></td> 
</tr> 
</script> 

<!-- Table Template --> 
<script type="text/html" id="section_table_template"> 
<table> 
    <thead> 
     <tr><th>Name</th><th>Count</th></tr> 
    </thead> 
    <tbody> 
     <!-- 
      Here I want ot iterate over the collection 
       and render template from '#table_row_template' 
     --> 
    </tbody> 
</table> 

</script> 

<script type="text/javascript"> 
    var context = { 
     collection: { 
      { 
       "item1": { "name": "item1", "count": "1" }, 
       "item2": { "name": "item2", "count": "12" }, 
       "item3": { "name": "item3", "count": "5" }, 
       "item4": { "name": "item4", "count": "32" }, 
       "item5": { "name": "item5", "count": "6" }, 
      }, 

     .......... 
     } 
    } 

    var t = hogan.compile(document.getElementById('section_table_template').innerHTML); 
    var rendered = t.render(context); 
</script> 

回答

2

你要找的小鬍子的 「部分」 標籤:

<script type="text/html" id="section_table_template"> 
<table> 
    <thead> 
     <tr><th>Name</th><th>Count</th></tr> 
    </thead> 
    <tbody> 
     {{# collection }} 
      {{> table_row }} 
     {{/ collection }} 
    </tbody> 
</table> 
</script> 

爲了得到這個與霍根工作,you simply have to tell it where your partials are

<script> 
var t = hogan.compile(document.getElementById('section_table_template').innerHTML); 
var partials = { 
    table_row: document.getElementById('table_row_template').innerHTML 
}; 
var rendered = t.render(context, partials); 
</script>