[jQuery]外掛特輯18:成天組HTML字串手痠了吧，改用template幫忙吧

如果你所開發的網站包含了很多Ajax的話，我相信你常常會為了組一連串的HTML字串忙的焦頭爛額，你必須小心翼翼的注意單引號和雙引號的關係，還要小心哪個tag是不是忘記close。這一切的困擾其實都來源於一個原因，那就是你缺少了一個template機制阿！
所謂template機制指的就是你可以在HTML字串中用某些固定格式做表示，讓程式可以知道哪個部份是需要替換的東西，將這個部份帶入你所指定的內容。就如同C#語言裡面的string.format，或是Python裡面的%記號一般。


這篇文章介紹的jQuery外掛十分湊巧的就叫做「template」(一定會有人在心理OS哪裡巧了^^")，透過template處理你要動態建立的DOM物件，建立基本常會使用的模板，我相信如此一來開發Ajax網路應用程式一定更加快速，更能夠得心應手。

• 外掛名稱：template
• 作者網站：http://www.stanlemon.net/index/articles/jquery-templates.html
• 外掛首頁：http://plugins.jquery.com/project/jquerytemplate

以下是簡單的程式碼說明：
如果今天你想把透過Ajax傳回來的json物件，顯示在畫面上。

{'name':'jack','weight':'70'}

那麼你要怎麼透過template協助開發呢？假設存在一個Div，當作你要放入HTML的容器。

var t = $.template('<tr><td>${name}</td><td>${value}</td></tr>'}
$('#divID').append();

如此一來你就可以很輕鬆的透過template將HTML所呈現的網頁結構中所有的代表標記，置換成真實資料。

如果覺得本文對您有幫助，歡迎訂閱悶騷男的RSS