首页 > 建站教程 > JS、jQ、TS >  jquery jTemplates.js模板渲染引擎的用法正文

jquery jTemplates.js模板渲染引擎的用法

    jTemplates是一个基于JQuery的模板引擎插件，功能强大，有了他你就再不用为使用JS绑定数据时发愁了。后端语言使用php,asp.net,jsp等都不是问题，使用模板渲染可以很大程度上提高程序性能，使用异步获取数据，不用整个页面都回发，好处当然不仅仅是这些。
    点击下载jTemplates
    jTemplates配合jQuery的delegate事件处理方法实现模板渲染。

    下面是详细用法总结：
    jtemplates模板的简单使用，首先使用jtemplates就要使用json数据，在这里我们不妨构造一个json格式的数据，如下： 
{
    "name" : "网马伦",
    "list_id" : 89757,
    "table":[
        {"id": 1, "name": "Rain", "age": 22, "mail": "admin@domain.com"},
        {"id": 2, "name": "皮特", "age": 24, "mail": "123456@domain.com"},
        {"id": 3, "name": "卡卡", "age": 20, "mail": "112233@domain.com"},
        {"id": 4, "name": "戏戏", "age": 26, "mail": "0147@domain.com"},
        {"id": 5, "name": "一揪", "age": 25, "mail": "kkw@domain.com"}
    ]
}
    接下来新建一个页面jtemplates_demo1.html
    然后引入jquery,我这里使用的是jquery-2.1.1.min.js，你可以在这里下载http://www.jquery.com/

    引入js文件代码如下： 
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-jtemplates.min.js"></script>
    接下来构造模板样式

    代码如下： 
<textarea id="template" class="template">
    <div><strong>部门编号：{$T.list_id}</strong></div>
    <div><strong>负责人：{$T.name} </strong></div>
    <div>
        <table>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>邮箱</th>
            </tr>
            {#foreach $T.table as record}
            <tr>
                <td>{$T.record.id}</td>
                <td>{$T.record.name}</td>
                <td>{$T.record.age}</td>
                <td>{$T.record.mail}</td>
            </tr>
            {#/for}
        </table>
    </div>
</textarea>
    这个是我要最终显示的效果，也就是模板，然后模板定义好了，然后我们在定义一个最后用来承载显示数据的标签，一般用div或者其他标签均可，我这里使用div如下： 
<div id="result"></div>
    此时我们的显示数据的前台HTML标签就写好了，模板和result这两个的顺序没有要求，但是为了阅读方便这里使用如下顺序放置： 
<div id="result"></div>
<textarea id="template" class="template">
    <div><strong>部门编号：{$T.list_id}</strong></div>
    <div><strong>负责人：{$T.name} </strong></div>
    <div>
        <table>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>邮箱</th>
            </tr>
            {#foreach $T.table as record}
            <tr>
                <td>{$T.record.id}</td>
                <td>{$T.record.name}</td>
                <td>{$T.record.age}</td>
                <td>{$T.record.mail}</td>
            </tr>
            {#/for}
        </table>
    </div>
</textarea>
    接下来就要在js中设置模板和处理数据啦，直接上代码，然后在解释代码的意思，代码如下： 
<script type="text/javascript">
    $(function(){
        // 初始化JSON数据
        var data = {
    "name" : "网马伦",
            "list_id" : 89757,
            "table":[
                {"id": 1, "name": "Rain", "age": 22, "mail": "admin@domain.com"},
                {"id": 2, "name": "皮特", "age": 24, "mail": "123456@domain.com"},
                {"id": 3, "name": "卡卡", "age": 20, "mail": "112233@domain.com"},
                {"id": 4, "name": "戏戏", "age": 26, "mail": "0147@domain.com"},
                {"id": 5, "name": "一揪", "age": 25, "mail": "kkw@domain.com"}
            ]
        };
 
        // 设置模板
        $("#result").setTemplateElement("template");
        // 给模板加载数据
        $("#result").processTemplate(data);
    });
</script>
    首先我们在前面直接引用了jQuery，在这里直接写在$(function(){});里面就可以了： 
$("#result").setTemplateElement("template");
    这一步非常关键，解释如下：
    这一步的意思就是讲id="result"的div设置模板为id="template"，然后就是处理数据，这里的打他就是json数据，这样就可以直接显示json数据了，这就是模板渲染，简单吧，下面是全部代码如下： 
<!doctype html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery - jTemplates</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="./js/jquery-jtemplates.min.js"></script>
    <style type="text/css">
    .container{
        width: 1000px;
        height: 600px;
        margin: 0 auto;
    }
    .template{
        display: none;
    }
    table{
        background-color: #fff;
    }
    table tr th{
        padding: 8px;
        border-bottom: 1px solid #eee;
    }
    table tr td{
        padding: 10px;
        border-bottom: 1px solid #eee;
    }
    </style>
    <script type="text/javascript">
    $(function(){
        // 初始化JSON数据
        var data = {
            "name" : "网马伦",
            "list_id" : 89757,
            "table":[
                {"id": 1, "name": "Rain", "age": 22, "mail": "admin@domain.com"},
                {"id": 2, "name": "皮特", "age": 24, "mail": "123456@domain.com"},
                {"id": 3, "name": "卡卡", "age": 20, "mail": "112233@domain.com"},
                {"id": 4, "name": "戏戏", "age": 26, "mail": "0147@domain.com"},
                {"id": 5, "name": "一揪", "age": 25, "mail": "kkw@domain.com"}
            ]
        };
 
        // 设置模板
        $("#result").setTemplateElement("template");
        // 给模板加载数据
        $("#result").processTemplate(data);
    });
    </script>
</head>
<body>
    <div class="container">
        <div><h1>标题</h1></div>
        <div id="result"></div>
        <textarea id="template" class="template">
            <div><strong>部门编号：{$T.list_id}</strong></div>
            <div><strong>负责人：{$T.name} </strong></div>
            <div>
                <table>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>邮箱</th>
                    </tr>
                    {#foreach $T.table as record}
                    <tr>
                        <td>{$T.record.id}</td>
                        <td>{$T.record.name}</td>
                        <td>{$T.record.age}</td>
                        <td>{$T.record.mail}</td>
                    </tr>
                    {#/for}
                </table>
            </div>
        </textarea>
 
        <!-- <textarea id="templateContainer" style="display: none;">
            <table>
                <tr>
                    <td>Id</td>
                    <td>标题</td>
                    <td>发布时间</td>
                </tr>
                {#foreach $T.Lists as row}
                <tr>
                    <td>{$T.row.Id}</td>
                    <td>{$T.row.Title}</td>
                    <td>{$T.row.CreateDate}</td>
                </tr>
                {#/for}
            </table>
        </textarea> -->
    </div>
</body>
</html>
    这里需要注意几点：
        1、首先模板样式用<textarea></textarea>标签或者script标签也可以： 
<script id="template">
    <div><strong>部门编号：{$T.list_id}</strong></div>
    <div><strong>负责人：{$T.name} </strong></div>
    <div>
        <table>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>邮箱</th>
            </tr>
            {#foreach $T.table as record}
            <tr>
                <td>{$T.record.id}</td>
                <td>{$T.record.name}</td>
                <td>{$T.record.age}</td>
                <td>{$T.record.mail}</td>
            </tr>
            {#/for}
        </table>
    </div>
</script>
        2、json格式必须是正确的，而且不能用单引号，都是双引号，属性名也必须加上双引号。

    最终显示效果如下：



TAGS: jTemplates