[JavaScript]JTemplate系列-初學(一)建立第一個JTemplate的程式

2014-07-28

1512
0

摘要:[JavaScript]JTemplate系列-初學(一)建立第一個JTemplate的程式

一、前言

目前在公司接手的案子，裡面有用一個jQuery的plugin叫JTemplate，個人覺得還不錯用，所以就來介紹這個工具是用來做什麼的
1.連結網址：http://jtemplates.tpython.com/
2.功能介紹：
(1)100%都是用JavaScript --100% in JavaScript
(2)先行編譯(不太懂)--precompilator
(3)支援JSON(Support JSON)
(4)與Ajax作用--Work with Ajax
(5)允許在template裡面使用Javascript--Allow to use JavaScript code inside template
-->意思就是，可以在它的UI中內寫Javascript的語法
(6) 可建立階層(巢狀)的template--Allow to build cascading templates
(7)可以在template裡面定義自已的參數--Allow to define parameters in templates
-->應該是指定義一些參數，然後在使用這個template的時候，把參數傳入，再做其它的事情(未確定)
(8)自動更新資料- Live Refresh! - automatic update content from server
-->應該是可以設定與伺服器一定時間重load資料(未確定)

二、本文

1.下載js
先連到http://jtemplates.tpython.com/，下載它的js，另外也去下載jquery的js，我載的時候是用1.11.1版，不用2.x版的原因，是它不支援IE8了，如果你用專案確定不用IE8以下，或是不用IE就沒差，如下圖，jTemplates.zip，裡面有它官方的samplecode，不過我介紹的時候，是用我自已寫。

2.將js放在專案的特定目錄中
將下載的Jtemplate、jQuery加入在自創的Javascript目錄裡(目錄名稱自訂)

3.實作開始
(1)模擬一個資料來源
在官方提供的sample中，是寫在data.json的檔案中，再去從這個檔案抓資料。後續再補充，如果這個系列後面我有繼續更新的話，再撰寫透過ajax去取得資料的方式。

(2)撰寫自已定義的template，以及要輸出template的div
這邊要做一個table，裡面有學生的資訊
．{#foreach $T.students as stu}.....{#/for}為Jtemplate的語法，要搭配在一起
$T.students-->指的就是就是(1)裡面設定的students
as stu -->取別名(一定要取)
．{$T.stu.name}-->student的name屬性，其它以此類推，如果你的資料來源沒這個屬性，就不會出現任何內容
．<div id="studentList"></div>要把template物件放入的地方

    <!--Template-->
    <p style="display: none">
        <textarea id="Template-student" rows="0" cols="0">

                    <table border="1">
                        <!--標題列-->
                        <tr>
                            <td>學生姓名</td>
                            <td>年齡</td>
                            <td>教室</td>
                        </tr>
                         <!--內容-->
                        {#foreach $T.students as stu}
                            <tr bgcolor=\"{#cycle values=['#AAAAAA','#CCCCCC']}\">
                                <td>{$T.stu.name}</td>
                                <td>{$T.stu.age}</td>
                                <td>{$T.stu.classRoom}</td>
                            </tr>
                        {#/for}
                    </table>
                </textarea>
    </p>
    <!--輸出的部份，就是要秀在頁面的部份-->
    <div id="studentList"></div>

3.設定template
語法很簡單，只有兩個
．setTemplateElement--指定一個模版給該物件
．processTemplate-指定資料給該物件
寫法有兩種
(1)

$("#studentList").setTemplateElement("Template-student").processTemplate(dataSource);

(2)這個

$("#studentList").setTemplateElement("Template-student")
$("#studentList").processTemplate(dataSource);

這兩個寫法都有一點要注意，要先指定template(setTemplateElement)，再指定模版的資料來源(processTemplate)，否則不會有資料出來

4.完整的code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="JavaScript/jquery-1.11.1.min.js"></script>
    <script src="JavaScript/jquery-jtemplates.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>學生資料</title>
    <script type="text/javascript">
        $(document).ready(function () {
            var dataSource = {
                students: [
                    {
                        "name": "Andrew",
                        "age": "18",
                        "classRoom": "3-A"
                    },
                    {
                        "name": "Ann",
                        "age": "16",
                        "classRoom": "1-A"
                    }
                ]
            };
            $("#studentList").setTemplateElement("Template-student").processTemplate(dataSource);
        
            //$("#studentList").setTemplateElement("Template-student")
            //$("#studentList").processTemplate(dataSource);
        })
    </script>
</head>
<body>
    <!--Template-->
    <p style="display: none">
        <textarea id="Template-student" rows="0" cols="0">

                    <table border="1">
                        <!--標題列-->
                        <tr>
                            <td>學生姓名</td>
                            <td>年齡</td>
                            <td>教室</td>
                        </tr>
                         <!--內容-->
                        {#foreach $T.students as stu}
                            <tr bgcolor=\"{#cycle values=['#AAAAAA','#CCCCCC']}\">
                                <td>{$T.stu.name}</td>
                                <td>{$T.stu.age}</td>
                                <td>{$T.stu.classRoom}</td>
                            </tr>
                        {#/for}
                    </table>
                </textarea>
    </p>
    <!--輸出的部份，就是要秀在頁面的部份-->
    <div id="studentList"></div>
</body>
</html>

四、Source Code

Sourcecode：https://github.com/weikaiChen/JTemplatePractice

回首頁