用模版生成HTML的的框架jquery.tmpl使用详解


Posted in Javascript onJanuary 07, 2015

动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。

这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据。不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML。

浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就想死了,需要很小心很小心地写出几乎无法维护的 JavaScript 代码。

因此一些用模版生成HTML的的框架相继出现jquery.tmpl 就是其中的一种,下面我们来详细介绍下jquery.tmpl的用法

下面重点介绍一下使用方法

首先介绍一下  模板和数据,不用说这两个肯定是不可缺少的

模板有两种定义方法,下面给出具体code

var markup = "<li>Some content: ${item}.<br/>" 

+ " More content: ${myValue}.</li>";
$.template( "movieTemplate", markup );

 
<script id="movieTemplate" type="text/x-jquery-tmpl"> 

<li><b>${Name}</b> (${ReleaseYear})</li> 

</script>

这样就定义了两种模板,前一种写到script里边,后边一种写到html里边

数据用json

下面开始渲染模板

$( "#movieTemplate" ).tmpl( movies ).appendTo( "#movieList" );

$.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );

注意:movies是json数据数组

var movies = [ 

{ Name: "The Red Violin", ReleaseYear: "1998" }, 

{ Name: "Eyes Wide Shut", ReleaseYear: "1999" }, 

{ Name: "The Inheritance", ReleaseYear: "1976" } 

];

jquery.tmpl的几种常用标签分别有:

${}, {{each}}, {{if}}, {{else}}, {{html}}

不常用标签

 {{=}},{{tmpl}} and {{wrap}}.

${}等同与{{=}}是输出变量 ${}里面还可以放表达式 (=和变量之间一定要有空格,否则无效)

示例:

<div id="div_demo">

</div>

<script id="demo" type="text/x-jquery-tmpl">

    <div style="margin-bottom:10px;">

    <span>${ID}</span>

    
<span style="margin-left:10px;">{{= Name}}</span>

    
<span style="margin-left:10px;">${Number(Num)+1}</span>

    
<span style="margin-left:10px;">${Status}</span>

    </div>

</script>

<script type="text/javascript">

var users = [{ ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 }, { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'}];

$("#demo").tmpl(users).appendTo('#div_demo');

</script>

{{each}} 提供循环逻辑,$value访问迭代变量 也可以自定义迭代变量(i,value)

示例:

<div id="div_each">

</div>

<script id="each" type="text/x-jquery-tmpl"> 

    <h3>users</h3>

    {{each(i,user) users}}

        <div>${i+1}:{{= user.name}}</div>

        {{if i==0}}

            <h4>group</h4>

            {{each(j,group) groups}}

                <div>${group.name}</div>

            {{/each}}

        {{/if}}

    {{/each}}

    <h3>depart</h3>

    {{each departs}}

        <div>{{= $value.name}}</div>

    {{/each}}

</script> 

<script type="text/javascript">
var eachData = { users: [{ name: 'jerry' }, { name: 'john'}], groups: [{ name: 'mingdao' }, { name: 'meihua' }, { name: 'test'}], departs: [{ name: 'IT'}] };

$("#each").tmpl(eachData).appendTo('#div_each');

</script>

{{if }} {{else}}提供了分支逻辑 {{else}} 相当于else if

示例:

<div id="div_ifelse"></div>

<script id="ifelse" type="text/x-jquery-tmpl"> 

    <div style="margin-bottom:10px;"><span>${ID}</span><span style="margin-left:10px;">{{= Name}}</span>

        {{if Status}}

            <span>Status${Status}</span>

        {{else App}}

            <span>App${App}</span>

        {{else}}

            <span>None</span>

        {{/if}}

    </div>

</script> 

<script type="text/javascript">
var users = [{ ID: 'think8848', Name: 'Joseph Chan', Status: 1, App: 0 }, { ID: 'aCloud', Name: 'Mary Cheung', App: 1 }, { ID: 'bMingdao', Name: 'Jerry Jin'}];

    $("#ifelse").tmpl(users).appendTo('#div_ifelse');

</script>

{{html}} 输出变量html,但是没有html编码,适合输出html代码

 实例

<div id="div_html"></div>

<script id="html" type="text/x-jquery-tmpl"> 

    <div style="margin-bottom:10px;">

<span>${ID}</span>


<span style="margin-left:10px;">{{= Name}}</span>

    
${html}

    
{{html html}}

    </div>

</script> 

<script type="text/javascript">

var user = { ID: 'think8848', Name: 'Joseph Chan', html: '<button>html</button>' };

   $("#html").tmpl(user).appendTo('#div_html');

</script>

{{tmpl}} 嵌套模版

实例

<div id="tmpl"></div>

<script id="tmpl1" type="text/x-jquery-tmpl">

    <div style="margin-bottom:10px;">

    <span>${ID}</span>

    
<span style="margin-left:10px;">{{tmpl($data) '#tmpl2'}}</span>

    </div>     

</script>

<script id="tmpl2" type="type/x-jquery-tmpl">

    {{each Name}}${$value}  {{/each}}   

</script>

<script type="text/javascript">

var users = [{ ID: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];

   $("#tmpl1").tmpl(users).appendTo('#tmpl');

</script>

{{wrap}},包装器

实例

<div id="wrapDemo">

    </div>

<script id="myTmpl" type="text/x-jquery-tmpl">

    The following wraps and reorders some HTML content:

    {{wrap "#tableWrapper"}}

        <h3>One</h3>

        <div>

            First <b>content</b>

        </div>

        <h3>Two</h3>

        <div>

            And <em>more</em> <b>content</b>...

        </div>

    {{/wrap}}

    </script>

<script id="tableWrapper" type="text/x-jquery-tmpl">

    <table cellspacing="0" cellpadding="3" border="1"><tbody>

        <tr>

            {{each $item.html("h3", true)}}

                <td>

                    ${$value}

                </td>

            {{/each}}

        </tr>

        <tr>

            {{each $item.html("div")}}

                <td>

                    {{html $value}}

                </td>

            {{/each}}

        </tr>

    </tbody></table>

    </script>

 <script type="text/javascript">

        $(function () {

            $('#myTmpl').tmpl().appendTo('#wrapDemo');

        });

    </script>

$data $item $item代表当前的模板;$data代表当前的数据。

 实例:

<div id="div_item_data"></div>

<script id="item_data" type="text/x-jquery-tmpl"> 

     <div style="margin-bottom:10px;">

<span>${$data.ID}</span>


<span style="margin-left:10px;">${$item.getName(" ")}</span>

 </div>

</script> 

<script type="text/javascript">

 
var users = [{ ID: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];

     $("#item_data").tmpl(users,

                {

                getName: function (spr) {

                   return this.data.Name.join(spr);

                }

                }).appendTo('#div_item_data');

</script>

 $.tmplItem()方法,使用这个方法,可以获取从render出来的元素上重新获取$item

实例

<script type="text/javascript">
$('#demo').delegate('div', 'click', function () {

                var item = $.tmplItem(this);

                alert(item.data.Name);

            });

</script>
Javascript 相关文章推荐
document.documentElement的一些使用技巧
Apr 18 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 #Javascript
jQuery中parents()方法用法实例
Jan 07 #Javascript
jQuery中parent()方法用法实例
Jan 07 #Javascript
jQuery中nextUntil()方法用法实例
Jan 07 #Javascript
jQuery中nextAll()方法用法实例
Jan 07 #Javascript
jQuery中next()方法用法实例
Jan 07 #Javascript
jQuery中find()方法用法实例
Jan 07 #Javascript
You might like
德生PL550的电路分析
2021/03/02 无线电
php 常用类整理
2009/12/23 PHP
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
Python内置模块logging用法实例分析
2018/02/12 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
小学生环保演讲稿
2014/04/25 职场文书
车间安全生产标语
2014/06/06 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis