用模版生成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 相关文章推荐
JQuery为textarea添加maxlength属性的代码
Apr 07 Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
js实现简单的贪吃蛇游戏
Apr 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
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
Javascript之文件操作
2007/03/07 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
django如何实现视图重定向
2019/07/24 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
EJB的激活机制
2013/10/25 面试题
毕业生学校推荐信范文
2014/05/21 职场文书
大跃进口号
2014/06/16 职场文书
节能减耗标语
2014/06/21 职场文书
学习计划书怎么写
2014/09/15 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
开场白怎么写
2015/06/01 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python