< 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

-----
參考資料:

• what is x-tmpl
• <blueimp> JavaScript-Templates