Jquery tmpl的使用

Jquery tmpl的使用jquerytmpl简介:动态请求数据更新页面非常常用的方法,例如博客评论的分页动态加载,微博的滚动加载和定时请求加载以及ajax请求返回数据等。这些情况下,动态请求返回的数据一般不是已拼好的html就是JSON或XML,总之不在浏览器端拼接数据就在服务器端拼接数据。浏览器端根据JSON生成HTML有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就需要很小心的写出几乎无法维护的javas…

大家好,又见面了,我是你们的朋友全栈君。

jquery tmpl简介:动态请求数据更新页面非常常用的方法,例如博客评论的分页动态加载,微博的滚动加载和定时请求加载以及ajax请求返回数据等。

这些情况下,动态请求返回的数据一般不是已拼好的html就是JSON或XML,总之不在浏览器端拼接数据就在服务器端拼接数据。

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

因此,一些用模板生成HTML的框架相继出现jquery.tmpl就是其中一种,下面讲一下jquery.tmpl的使用语法,可分为三大类:

1、显示类
{
{html}}/{
{= }}/${},这三个标签多能够将数据输出到模板中,但是{
{html}}不会对数据进行编码,用于输出数据中的HTML代码段,
而{
{=}}和${}怎会对数据进行编码,防止数据对于模板结构的破坏。
2、条件判断及循环
{
{if}}/{
{else}}/{
{/if}}/{
{each}}请注意是没有for/while/switch的,相对来说jquery Tmpl只支持
较为简单的逻辑判断,当然如果你感觉这些满足不了你的需求的话,可以自己写函数然后调用。
3、复用类
{
{tmpl}}当分支模板过长(写在一个模板中较为轮乱)或者使用已经写好的通用模板,{
{temp}}的作用就是
调用指定ID模板来显示数据。

下面具体写个例子表现一下:

例1:通过直接写json字符串的形式引入数据。

[html] 
view plain  
copy

  1. <div style=“margin-top: 30px;”>  
  2.             <h3>地区</h3>  
  3.             <div id=“place”></div>  
  4.         </div>  
  5.         <script src=“js/jquery-1.11.1.min.js”></script>  
  6.         <script src=“js/jquery.tmpl.js”></script>  
  7.         <script type=“text/tmpl” id=“temp”>  
  8.             <span style=“margin: 0 6px;”>${place}</span>  
  9.         </script>  
  10.         <script>  
  11.             var origin={  
  12.                 plc:[  
  13.                     {place:’上海’},  
  14.                     {place:’深圳’},  
  15.                     {place:’北京’},  
  16.                     {place:’广州’}  
  17.                 ]  
  18.             };  
  19.             $(‘#temp’).tmpl(origin.plc).appendTo(‘#place’);  
  20.         </script>  



例2:通过getJSON引入json数据。

[html] 
view plain  
copy

  1. <div style=“margin-top: 30px;”>  
  2.             <h3>地区</h3>  
  3.             <div id=“place”></div>  
  4.         </div>  
  5.         <script src=“js/jquery-1.11.1.min.js”></script>  
  6.         <script src=“js/jquery.tmpl.js”></script>  
  7.         <script type=“text/tmpl” id=“temp”>  
  8.             <span style=“margin: 0 6px;”>${place}</span>  
  9.         </script>  
  10.         <script>  
  11.             $.getJSON(‘json/place.json’,function(data){  
  12.                 //通过拼接字符串的形式书写  
  13.                 /*var str=“”;  
  14.                 for(var i=0;i<data.plc.length;i++){  
  15.                     str+=’<span style=“margin: 0 6px;”>‘+data.plc[i].place+’</span>‘;  
  16.                     console.log(“str:”+str);  
  17.                 }  
  18.                 $(‘#place’).append(str);  
  19.                 */  
  20.                 //tmpl形式  
  21.                 $(‘#temp’).tmpl(data.plc).appendTo(‘#place’);  
  22.             });  
  23.         </script>  

place.json数据内容为:

{

“plc”:[
{“place”:”上海”},
{“place”:”深圳”},
{“place”:”北京”},
{“place”:”广州”}
]
}
例3:读取多个参数信息。

[html] 
view plain  
copy

  1. <div class=“container”>  
  2.             <table border=“1px” cellpadding=“5” cellspacing=“0” width=“100%”>  
  3.                 <thead>  
  4.                     <tr>  
  5.                         <td>firstName</td>  
  6.                         <td>lastName</td>  
  7.                         <td>email</td>  
  8.                         <td>place</td>  
  9.                     </tr>  
  10.                 </thead>  
  11.                 <tbody id=“tbody”></tbody>  
  12.             </table>  
  13.             <table border=“1px” cellpadding=“5” cellspacing=“0” width=“100%” style=“margin-top: 30px;”>  
  14.                 <thead>  
  15.                     <tr>  
  16.                         <td>Name</td>  
  17.                         <td>Level</td>  
  18.                         <td>img</td>  
  19.                     </tr>  
  20.                 </thead>  
  21.                 <tbody id=“tbody2”></tbody>  
  22.             </table>  
  23.         </div>  
  24.         <script src=“js/jquery-1.11.1.min.js”></script>  
  25.         <script src=“js/jquery.tmpl.js”></script>  
  26.         <script type=“text/tmpl”  id=“temp”>  
  27.             <tr>  
  28.                 <td>${firstName}</td>  
  29.                 <td>{
    {= lastName}}
    </td>  
  30.                 <td>{
    {html email}}
    </td>  
  31.                 <td>{
    {html place}}
    </td>  
  32.             </tr>  
  33.         </script>  
  34.         <script type=“text/tmpl” id=“temp2”>  
  35.             <tr>  
  36.                 <td>${name}</td>  
  37.                 <td>${level}</td>  
  38.                 <td><img src=“${img}”/></td>  
  39.             </tr>  
  40.         </script>  
  41.         <script>  
  42.             $.getJSON(“json/test.json”,{},function(data){  
  43.                 $(‘#temp’).tmpl(data.programmers).appendTo(‘#tbody’);  
  44.                 $(‘#temp2’).tmpl(data.authors).appendTo(‘#tbody2’);  
  45.             });  
  46.         </script>  

test.json数据内容为:

{

“programmers”:[
{“firstName”:”Lucy”,”lastName”:”zhao”,”email”:”123456″,”place”:”上海”},
{“firstName”:”Tizzy T”,”lastName”:”wang”,”email”:”123″,”place”:”北京”}
],
“authors”:[
{“name”:”Any”,”level”:”one”,”img”:”./img/foot_21.png”},
{“name”:”cool”,”level”:”two”,”img”:”img/foot_31.png”},
{“name”:”Luck”,”level”:”three”,”img”:”img/foot_41.png”}
],
“origin”:[
{“place”:”上海”},
{“place”:”深圳”},
{“place”:”北京”},
{“place”:”广州”}
]
}

注意:页面中引入有jquery和jquery.tmpl文件,必要时修改一下路径。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/149081.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • hdu 3980 Paint Chain(SG函数)

    hdu 3980 Paint Chain(SG函数)PaintChainProblemDescriptionAekdycoinandabcdxyzkareplayingagame.Theygetacirclechainwithsomebeads.Initiallynoneofthebeadsispainted.Theytaketurnstopaintthechain.InEachtur

  • jquery 字符串转数组

    如何把字符串”123,abc,xy,hi”转换成数组或者jQuery数组vararr=’123,abc,xy,hi’.split(‘,’);for(variinarr){alert(arr[i])}出处:http://www.cnblogs.com/xiaomuv587/archive/2012/10/18/2729766.html

  • vim复制粘贴命令

    vim复制粘贴命令1.选定文本块。使用v进入可视模式,移动光标键选定内容。 2.复制的命令是y,即yank(提起),常用的命令如下:   y   在使用v模式选定了某一块的时候,复制选定块到缓冲区用;   yy  复制整行(nyy或者yny,复制n行,n为数字);   y^  复制当前到行头的内容;   y$  复制当前到行尾的内容;   yw  复制一个word(ny…

  • java面试题csdn_java底层面试题

    java面试题csdn_java底层面试题问题是:n只奶牛坐在一排,每个奶牛拥有ai个苹果,现在你要在它们之间转移苹果,使得最后所有奶牛拥有的苹果数都相同,每一次,你只能从一只奶牛身上拿走恰好两个苹果到另一个奶牛上,问最少需要移动多少次可以平分苹果,如果方案不存在输出-1输出描述:输出一行表示最少需要移动多少次可以平分苹果,如果方案不存在则输出-1。输入例子:471595输出例子:3im…

  • Tomcat如何配置环境变量

    Tomcat如何配置环境变量分步阅读下载安装tomcat,如何配置环境变量?配置过程中是否和作者一样经常出现错误?请仔细读文及注意事项。工具/原料1,JDK:版本为jdk-8u121-windows-x64.exe下载地址http://www.oracle.com/technetwork/java/javase/downloads/index.html2,tomcat:版本为apache-tomcat-8.0.36-windows-x64.zip下载地址http://tomcat.apache.org/3,wn10,

  • 运维面试官喜欢问的问题是_运维是什么意思

    运维面试官喜欢问的问题是_运维是什么意思你最大的缺点是什么?行为问题(behaviouralquestion),这类问题目的是看性格是否合适公司文化。主要考察:①你是否真心想做这个工作;②你性格与企业文化是否相符。所有答案都应该围绕这两点组织,即每个经历都应回归到你通过这个经历学到什么该职位所需关键技巧,这些经历为何让你想做这个工作,和该经历体现出你什么样的个人风格。你最大的缺点是什么:①避免避重就轻,谈一个算不得缺点的缺点,这…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号