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)


相关推荐

  • navicat mac激活码(注册激活)

    (navicat mac激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~MLZPB5EL5Q-eyJsaWNlb…

  • string 保留小数点后两位(js中保留小数点后两位)

    js保留小数点后N位的方法介绍利用toFixed函数代码如下复制代码document.write(“JS保留两位小数例子”);vara=2.1512131231231321;document.write(“原来的值:”+a+””);document.write(“两位小数点:”+a.toFixed(2)+”四位小数点”+a.toFixed(4));四舍五入的转换函数,如下:代码如下复制代码f…

  • unity3d教程视频_unity3d零基础自学教程

    unity3d教程视频_unity3d零基础自学教程Unity3D游戏开发知识系列图                        1、Unity3d基础操作说明:这部分课程是帮助掌握Unity基础的操作,为阶段的学习打下基础1)Unity3D初级课程之新手入门   课程地址:http://www.taikr.com/course/4292、NGUI3、Pl

  • Kotlin之JSON格式解析

    kotlin解析json文件第一步:首先导入KlaXon库,官网地址是:https://github.com/cbeust/klaxon导入成功后我们将试着编译一个Json资源第二步:编译开始valJsonObjec=json{obj(“name”to“zhangsan”,“age”33)}这是第一种创建方式类似{“name”:“zhangsan”“age”=3…

  • APP——List「建议收藏」

    [‘王者荣耀’,’QQ’,’作业帮-学习辅导’,’绝地求生:刺激战场’,’爱奇艺’,’快手’,’腾讯视频’,’微信’,’抖音短视频’,’全民K歌’,’手机淘宝’,’迷你世界’,’QQ音乐’,’优酷’,’WiFi万能钥匙’,’酷狗音乐’,’荒野行动’,’互动作业’,’穿越火线:荒岛特训-60V60′,’QQ飞车手游’,’拼多多’,’绝地求生全军出击’,’…

  • cacti网络监控工具完全指南

    cacti网络监控工具完全指南

发表回复

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

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