2012/10/14

jQuery.tmpl

之前提到用 jQuery 的 clone() 複製一列表格,再用 text() 修改該列的文字內容,但這個方法會經過多次 DOM 處理,效率不高。

經過阿育推薦後,發現 jQuery.tmpl() 樣板引擎還不賴,用起來不難且程式碼看起來會乾淨很多。


先定義表格一列的樣板:
<table id="target-table"> </table>

<script type="text/x-jquery-tmpl" id="row-template">
  <tr>
    <td>${name}</td>
    <td>${comment}</td>
  </tr>
</script>

在樣板中文字內容的位置使用 ${VARIABLE} 取代,tmpl() 會解析樣板內容並將資料填入。

接著透過 tmpl() 處理新增一列至表格最後方:
var data = {
   name: 'zeroplex',
   comment: 'some text'
};

$.tmpl( $('#row-template').html(), data)
    .insertAfter('#target-table > tbody > tr:last');

tmpl() 會自動將第二個傳入的參數對應到樣板變數,data.name 會被帶入 ${name}、data..comment 被帶入 ${comment},最後將處理完畢的資料放入原始頁面中。


Reference:.tmpl() - jQuery API
http://api.jquery.com/tmpl/

沒有留言:

張貼留言