jQuery .tmpl() 用法示例介绍-6ren

jQuery .tmpl() 用法示例介绍

转载作者：qq735679552 更新时间：2022-09-27 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章jQuery .tmpl() 用法示例介绍由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

动态请求数据来更新页面是现在非常常用的方法，比如博客评论的分页动态加载，微博的滚动加载和定时请求加载等.

这些情况下，动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML，总之不在浏览器端拼数据就在服务器端拼数据。不过，从传输量方面来看，返回 HTML 不划算，而在 web 传输方面，现在更多的是使用 JSON 而不是 XML.

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

如同为解决 PHP 拼数据这方面的问题而有了 Smarty 这些模版，JavaScript 也可以利用模版来解决这些问题，比如基于 jQuery 的 jquery.tmpl，现在已经被接受为官方的模版插件了。详细的 API 在 jQuery 的 Templates 里，内置的 demo 也尽情地演示了各种用法.

就我自己的几次使用，感觉很不错，用更加直观方面的 HTML 写法而不是 JavaScript 拼凑来写结构，然后用 JSON 变量来占位的方式来填充数据，代码看起来好多了.

Tmpl提供了几种tag:

${}：等同于{{=}}，是输出变量，通过了html编码的。 {{html}}:输出变量html,但是没有html编码，适合输出html代码。 {{if }} {{else}}:提供了分支逻辑。 {{each}}:提供循环逻辑，$value访问迭代变量.

jquery tmpl的使用方法:

模板定义:

方法一:

 
    ? 
   
         <script id= 
         "movieTemplate" 
         type= 
         "text/x-jquery-tmpl" 
         >  
        
         <li>  
        
         <b>${Name}</b> (${ReleaseYear})  
        
         </li>  
        
         </script>

方法二:

 
    ? 
   
         function 
         makeTemplate(){  
        
         var 
         markup='<li><b>${Name}</b> (${ReleaseYear})</li>‘;  
        
         $.template(“movieTemplate”, markup);  
        
         }

DATA

 
    ? 
   
         var 
         movies = [  
        
         { Name:  
         "The Red Violin" 
         , ReleaseYear:  
         "1998" 
         },  
        
         { Name:  
         "Eyes Wide Shut" 
         , ReleaseYear:  
         "1999" 
         },  
        
         { Name:  
         "The Inheritance" 
         , ReleaseYear:  
         "1976" 
         }  
        
         ];

Script

 
    ? 
   
         $(  
         "#movieTemplate" 
         ).tmpl( movies )  
        
         .appendTo(  
         "#movieList" 
         );

实例1:

 
    ? 
   
         <!DOCTYPE html>  
        
         <html>  
        
         <head>  
        
         <script src= 
         "http://code.jquery.com/jquery-latest.min.js" 
         ></script>  
        
         <script src= 
         "http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" 
         ></script>  
        
         </head>  
        
         <body>  
        
         <ul class= 
         "param-list" 
         ></ul>  
        
         <script type= 
         "text/x-jquery-tmpl" 
         id= 
         "new-param-tmpl" 
         >  
        
         <li rel= 
         "${num}" 
         >  
        
         <input type= 
         "text" 
         name= 
         "key[${num}]" 
         value= 
         "${key}" 
         placeholder= 
         "key" 
         /> =  
        
         <input type= 
         "text" 
         name= 
         "value[${num}]" 
         value= 
         "${value}" 
         placeholder= 
         "value" 
         />  
        
         <button type= 
         "button" 
         class= 
         "button small remove-param" 
         ><img src= 
         "http://mediacdn.disqus.com/1338845651/images/v3/icon/16/69.png" 
         height= 
         "12" 
         alt= 
         "" 
         /></button>  
        
         <button type= 
         "button" 
         class= 
         "button small add-param" 
         ><span><img src= 
         "http://mediacdn.disqus.com/1338845651/images/v3/icon/16/13.png" 
         height= 
         "12" 
         alt= 
         "" 
         /></button>  
        
         </li>  
        
         </script>  
        
         <script>  
        
         $( 
         function 
         (){  
        
         function 
         addParam(key, value) {  
        
         var 
         param_list = $( 
         '.param-list' 
         );  
        
         var 
         num = param_list.find( 
         'li' 
         ).length;  
        
         // build a template to clone the current row  
        
         var 
         built = $( 
         '#new-param-tmpl' 
         ).tmpl({  
        
         num: num,  
        
         key: key ||  
         '' 
         ,  
        
         value: value ||  
         '' 
         ,  
        
         });  
        
         if 
         (key) param_list.prepend(built);  
        
         else 
         param_list.append(built);  
        
         param_list.find( 
         'li:not(:last) .add-param' 
         ).hide();  
        
         param_list.find( 
         'li:last .add-param' 
         ).show();  
        
         param_list.find( 
         'li:not(:last) .remove-param' 
         ).show();  
        
         param_list.find( 
         'li:last .remove-param' 
         ).hide();  
        
         }  
        
         // bind events  
        
         $( 
         '.param-list .remove-param' 
         ).live( 
         'click' 
         ,  
         function 
         (){  
        
         $( 
         this 
         ).parent().remove();  
        
         return 
         false 
         ;  
        
         });  
        
         $( 
         '.param-list .add-param' 
         ).live( 
         'click' 
         ,  
         function 
         (){  
        
         addParam();  
        
         return 
         false 
         ;  
        
         });  
        
         addParam();  
        
         }) 
        
         </script>  
        
         </body>  
        
         </html>

实例2 。

 
    ? 
   
         <ul id= 
         "movieList" 
         ></ul>  
        
         <script id= 
         "movieTemplate" 
         type= 
         "text/x-jquery-tmpl" 
         >  
        
         <li><b>${Name}</b> (${ReleaseYear})</li>  
        
         </script>  
        
         <script type= 
         "text/javascript" 
         >  
        
         var 
         movies = [  
        
         { Name:  
         "The Red Violin" 
         , ReleaseYear:  
         "1998" 
         },  
        
         { Name:  
         "Eyes Wide Shut" 
         , ReleaseYear:  
         "1999" 
         },  
        
         { Name:  
         "The Inheritance" 
         , ReleaseYear:  
         "1976" 
         }  
        
         ];  
        
         // Render the template with the movies data and insert  
        
         // the rendered HTML under the "movieList" element  
        
         $(  
         "#movieTemplate" 
         ).tmpl( movies )  
        
         .appendTo(  
         "#movieList" 
         );  
        
         </script>

。

最后此篇关于jQuery .tmpl() 用法示例介绍的文章就讲到这里了,如果你想了解更多关于jQuery .tmpl() 用法示例介绍的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐：通过SSH连接本地linux虚拟机的过程记录

文章推荐：字段太多jquey快速清空表单内容方法

文章推荐： Xshell与Xftp免费下载安装及步骤(图文)

文章推荐： jQuery控制TR显示隐藏的三种常用方法

RestSharp 用法
最近我在用 RestSharp消耗我的 Restful 资源。并期望在服务器和客户端之间与 JSon 交换数据。下面是我的 C# 代码。 var client = new RestSharp.Rest
Haskell的函数应用运算符($)用法
我正在阅读 Bartosz Milewski 的一篇文章，其中他定义了以下函数: instance Applicative Chan where pure x = Chan (repeat x)
深入浅析Go中三个点(...)用法
‘…' 其实是go的一种语法糖。它的第一个用法主要是用于函数有多个不定参数的情况，可以接受多个不确定数量的参数。第二个用法是slice可以被打散进行传递。实例：
聊聊python中令人迷惑的duplicated和drop_duplicates()用法
前言在算face_track_id map有感：开始验证 data={"state":[1,1,2,2,1,2,2,2],"pop":[&quo
php访问数组最后一个元素的函数end()用法
本文实例讲述了php访问数组最后一个元素的函数end()用法。分享给大家供大家参考。具体分析如下： end()函数在PHP中用于检索数组中的最后一个元素。end()函数需要一个数组作为其唯一参数，
java - MaxDirectMemorySize 用法
我使用的是 jdk1.8.0_92。我的虚拟机如下所示。 $java -version java version "1.8.0_92" Java(TM) SE Runtime Environment
php - mod_rewrite 用法
我的情况是我需要将所有匹配 http://mywebsite.com/portfolio/[anyname] 的请求定向到 http://mywebsite.com/portfolio.php？用户名
nltk pos_tag 用法
我正在尝试在 NLTK 中使用语音标记并使用了以下命令: >>> text = nltk.word_tokenize("And now for something completely differe
qt - qRegisterMetaType 用法
#include typedef QList IntList; qRegisterMetaType("IntList"); error C2909: 'qRegisterMetaType':
OpenSSL BN_CTX 用法
来自 here我知道 BN_CTX 是一个保存 BIGNUM 临时变量的结构。这些 BIGNUM 变量什么时候会进入 BN_CTX 的 BN_POOL？如果我有一个 bignum_ctx BN_CTX
iphone - ABPersonRef - 用法
尝试为 ABPersonRef 创建对象例子:ABpersonRef 引用；已包含Addressbook和AddressBookUI框架即使这样，当我编译时，它仍显示“ABPersonRef”未声明
winapi - GetAllTabInfo 用法？
我无法使用 GetAltTabInfo。可能是一个愚蠢的错误，但这有什么问题呢？ HWND taskSwitcher = FindWindow(L"TaskSwitcherWnd", L"Task S
wrapper - JSLint4Java 用法
JSLint4Java 是 JSLint 的 Java 包装器。我需要这样的东西在我的 GWT 项目中使用，但使用 JSLint4Java 的唯一方法似乎是从命令行或通过 ANT 任务。有谁知道是否有
JPA @PostPersist 用法
我有一个持久化实体对象的方法 persistData() 。我有另一个方法 findData() ，它对同一实体类执行 find() 操作以获取持久的主键值。当我在实体类的@PostPersist中调
Linq IQueryable.Any() 用法
下面是我的代码。请查看。 1. bool isUnavailable = db.Deploys.Where(p => p.HostEnvironmentId == Guid.Parse(h
Java泛型 super 用法
这个问题已经有答案了: Why can't a Generic Type Parameter have a lower bound in Java? (6 个回答) 已关闭 9 年前。我试图理解为什
scala Ywarn-all 用法
我正在尝试使用 scala 编译器 Y 警告，但我认为我做得不对。在下面的示例中，nums 未使用，因此我希望 -Ywarn-value-discard 打印一个警告。有两个 if 条件，一个嵌套在另
java - 异常抛出 - 用法
用户被要求从某个给定的集合中选择一个 ID。我检查该 ID 是否存在于我的集合中，如果不存在，我会抛出 IndexOutOfBoundsException 并稍后捕获它。我实际上可以使用该异常来达到这
java - DouglasPeuckerSimplifier 用法
我正在尝试减少从 OSM 路径数据生成的形状文件。我正在使用 VTS 的 DouglasPeuckerSimplifier 实现。我想为特定 GTFS(通用交通提要规范)构建路线图的 geojson。
Java 正则表达式排除模式？!用法
我明白了？!是排除某个模式，例如 a(?!b) 表示如果“a”后面没有“b”，它将匹配“a”。我的问题是，假设我有一个包含以下内容的文件: a cat is a cat, a dog is a dog

qq735679552

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jQuery .tmpl() 用法示例介绍