用模版生成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 相关文章推荐
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
canvas知识总结
Jan 25 Javascript
Ajax请求超时与网络异常处理图文详解
May 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
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
python中import学习备忘笔记
2017/01/24 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
python字符串的拼接方法总结
2019/11/18 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
python实现对变位词的判断方法
2020/04/05 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
社会实践活动总结报告
2014/04/29 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
会计专业求职信范文
2015/03/19 职场文书
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android