用模版生成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实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 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
在Windows版的PHP中使用ADO
2006/10/09 PHP
PHP生成静态页
2006/11/25 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
js 巧妙去除数组中的重复项
2010/01/25 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
创建nuxt.js项目流程图解
2020/03/13 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
python实现遍历文件夹修改文件后缀
2018/08/28 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
Python colormap库的安装和使用详情
2020/10/06 Python
应届生求职信写作技巧
2013/10/24 职场文书
应届生法律顾问求职信
2013/11/19 职场文书
表彰大会策划方案
2014/05/13 职场文书
事业单位考核材料
2014/05/21 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
小学班主任评语
2014/12/29 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA