Handlebars模板引擎之進階

取得索引

---

我想取得索引做爲序號這個是經常使用的。在handlebars也是存在的。

就是使用 @index 來獲取索引

{{#each this}}
    <tr>
        <td>{{  @index }}</td>
    </tr>
 {{/each}}

效果:

模板註釋

---

經過{{! }}這樣的格式進行模板的註釋,這樣的註釋過的模板是會被模板解析的時候忽略掉。

<script id="onestair-template" type="text/x-handlebars-template">
    <select id="onestair" class="form-control" data-live-search="true">
        <option value='all'>所有</option>
        {{#each this}}
        <option value="{{this.onestair}}">{{! this.onestair }}</option>
        {{/each}}
    </select>
    <!--zqz_test-->
</script>

固然咱們的

<!---->

這樣的通用註釋依舊可用。

轉義

---

跟jade(pug)同樣，相似的模板引擎都會有轉義的功能。

<td>{{ this.remark }}</td>

若是咱們的remark (備註)中有

{"remark":"<p>OKOKOKOKOK</p>"}

這樣的數據，咱們不添加{{{ }}}這樣的符號的時候，remark被當作字符串輸出，由於{{ }}對<p>進行了轉義。

若是咱們使用{{{ }}}這樣禁止轉義的形式的話

<td>{{{ this.remark }}}</td>

結果被當成html的標籤進行了渲染: