2016/11/25

< script ... type="text/x-tmpl" > 是甚麼語法? 作用為何?

最近在學習使用 jQuery plugin "jQuery-file-upload" 的時候,在其所提供的 PHP 範例出現了一段這樣的語法 :
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
  <tr class="template-download fade">
    {% if (file.error) { %}
        <td></td>
        <td class="name"><span>{%=file.name%}</span></td>
        ...
乍看之下感到很納悶,我用的是 PHP 範例,怎麼會出現類似 ASP 的 % 符號? 再仔細一看,<script> 標籤中出現了 type="text/x-tmpl" 沒見過的 MIME type,猜想這應該是沒學過的語法,上網 google 了之後找出了答案,這是使用 javascript 作為 template engine 將資料輸出成為 html 格式的用法。

把 <script> 標籤的 type 設定為 text/x-tmpl 類型,目的是為了防止瀏覽器將 <script>...</script> 中的內容翻譯成 javascript。也就是刻意讓瀏覽器認不出這段 <script> 的用途,因而跳過這部分。

剩下的工作就是讓專門的 javascript 樣板引擎,將這段內容中的資料,套用一般程式的流程控制輸出成 html 格式。

將變數資料輸出成 html 格式是 server-side 樣板語言(PHP,ASP)的主要功能。只不過在這裡使用 javascript 作為 client-side 的 html 樣板語言。

text/x-tmpl 並非公定標準的 MIME type,而是由樣板引擎的作者自行制定的,其中流程控制的部分也用了特殊的標籤,比如 "{% .... %}",目的是為了和 html 標籤作區別以免混淆。

client-side 樣板引擎有來自不同作者的各種版本,此篇的語法是來自 Sebastian Tschan,他最著名的作品是 jQuery-file-upload

-----
參考資料: