jTemplates, Template Engine ของ jQuery

ได้ไปอ่านบทความเกี่ยวกับ Template Engine ที่เว็บ jquerytips เป็น Template Engine ที่เป็น plugin ของ jQuery น่าสนใจดีครับ เลยเอามาแบ่งปันกัน

jTemplate เป็น Template Engine ที่มีลักษณะการเขียน (Syntax) ที่เรียกได้ว่าลอกแบบกันมาจาก Smarty เลยทีเดียว ทำให้คนที่มีพื้นฐานของ Smarty อยู่แล้ว สามารถเรียนรู้ jTemplate ได้โดยง่าย ส่วนรูปแบบของข้อมูลที่รองรับก็จะอยู่ในรูปแบบของ JSON มาดูตัวอย่างการเขียนกันครับ

ขั้นแรก ผมจะกำหนด data ที่จะใช้งานก่อนครับ

var data = {
    id: 4,
    name: "User List",
    table: [
        {id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'},
        {id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},
        {id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com'},
        {id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com'},
        {id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com'}
    ],
    toString: function() {
        return this.name.bold() + ' (count: ' + this.table.length + ')';
    }
};

เสร็จแล้วก็มากำหนด Template

{#template MAIN}
<div id="header">{$T.name}</div>
<table>
{#foreach $T.table as r}
    {#include row root=$T.r}
{#/for}
</table>
{#/template MAIN}

{#template row}
<tr bgcolor="{#cycle values=['#AAAAEE','#CCCCFF']}">
    <td>{$T.name.bold()}</td>
    <td>{$T.age}</td>
    <td>{$T.mail.link('mailto:'+$T.mail)}</td>
</tr>
{#/template row}

ที่เหลือก็แค่เรียกใช้งาน plugin ตัวนี้เท่านั้นเองครับ ง่าย ๆ

$("#result").setTemplate($("textarea").text()).processTemplate(data);

ลองไปดูตัวอย่างที่ LIVE DEMO ได้เลยครับ

แหล่งอ้างอิงและ API

• http://jtemplates.tpython.com/
• http://www.jquerytips.com/2008/12/07/jtemplate-template-engine-in-javascript/