ขั้นแรก ผมจะกำหนด 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/

ทีนี้ ผมก็มาคิด ๆ ดูว่าไอ้เจ้า Template เนี่ย มันมีไอเดียการทำงานยังไง ลองมาดูกัน

หลักการง่าย ๆ ของการทำ Template คือ การแยกแนวคิดให้ตัว Template ทำหน้าที่แสดงผลอย่างเดียว โดยไม่มี Logic อื่น ๆ มาเกี่ยวข้อง เราอาจจะมี condition บางอย่างอยู่ใน template ได้ แต่ก็เฉพาะในส่วนที่เกี่ยวข้องกับการแสดงผลเท่านั้น ดังนั้น สิ่งที่จำเป็นก่อนการแสดงผลนั่นก็คือ การเตรียมข้อมูลที่จะแสดงให้พร้อมนั่นเอง ต่อจากนั้นเราก็นำข้อมูลที่เราเตรียมไว้ ไปยัดใส่ template ที่เราเตรียมไว้ เป็นอันเรียบร้อย

เรามาสร้าง template engine แบบง่ายที่สุดในโลกกันดีกว่า

function apply_template($data, $template)
{
    ob_start();
    include ($template);
    $output = ob_get_clean();
    return $output;
} 

ดูเหมือนง่ายมั๊ยครับ แค่ไม่กี่บรรทัดเอง ส่วนของ template file เราก็จะมีตัวแปรไว้ใช้งานตัวนึง ชื่อว่า $data นั่นเองครับ เวลาเราส่งค่าเข้า template ก็ให้ส่งผ่านตัวแปรตัวเดียวครับ (อาจจะทำเป็น array หรือ object ก็ได้ครับ)

ลองดูตัวอย่างใน LIVE DEMO นะครับ