jquery tmpl 详解「建议收藏」

jquery tmpl 详解「建议收藏」转自:http://www.cnblogs.com/zhuzhiyuan/p/3510175.html动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据。不过,从传输量方面来看,返回 HTML

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

转自:http://www.cnblogs.com/zhuzhiyuan/p/3510175.html
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。

 
这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据。不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML。
浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就想死了,需要很小心很小心地写出几乎无法维护的 JavaScript 代码。
因此一些用模版生成HTML的的框架相继出现jquery.tmpl 就是其中的一种,下面我们来详细介绍下jquery.tmpl的用法
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>

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

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

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

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

(0)


相关推荐

  • python的dropna函数_Pandas dropna()函数不工作「建议收藏」

    python的dropna函数_Pandas dropna()函数不工作「建议收藏」我试图从pandas数据框中删除NA值。我使用了dropna()(它应该从数据帧中删除所有NA行)。然而,它不起作用。代码如下:importpandasaspdimportnumpyasnpprison_data=pd.read_csv(‘https://andrewshinsuke.me/docs/compas-scores-two-years.csv’)这就是获取数据帧的方法。…

  • 一文搞懂什么是粒子群优化算法(Particle Swarm Optimization,PSO)【附应用举例】「建议收藏」

    一文搞懂什么是粒子群优化算法(Particle Swarm Optimization,PSO)【附应用举例】「建议收藏」粒子群优化算法1.1粒子群优化算法简介粒子群优化算法(ParticleSwarmOptimization,PSO)是进化计算的一个分支,是一种模拟自然界的生物活动的随机搜索算法。PSO模拟了自然界鸟群捕食和鱼群捕食的过程。通过群体中的协作寻找到问题的全局最优解。它是1995年由美国学者Eberhart和Kennedy提出的,现在已经广泛应用于各种工程领域的优化问题之中。1.1.1思想来源从动物界中的鸟群、兽群和鱼群等的迁移等群体活动而来。在群体活动中,群体中的每一个个体都会受益于所有成员在

    2022年10月11日
  • win10下MinGW安装及配置

    win10下MinGW安装及配置下载MinGW安装管理器进入官网MinGW官网点击右上角download,加载可能有些慢,稍等一下。点击如图下载。下载完install安装点击change选择你要安装的目录,continue继续。等待下载,下载完成后单击continue继续。现在MinGW安装管理器就有了,可以正式安装MinGW了安装MinGW上一步安装好管理器之后会自动在桌面创建一个快捷方式,双击打开…

  • win10 系统WLAN不见了,win10找不到wifi选项的解决办法

    win10 系统WLAN不见了,win10找不到wifi选项的解决办法问题如下图所示:可以看到没有WLAN设置的选项而且是无网络的状态解决办法:两步就好了第一步,以管理员身份运行CMD点击Cortana输入cmd鼠标右键命令提示符以管理员身份运行还有一种办法就是进入C:\Windows\System32还是右键以管理员身份运行两种方法都可以第二步:使用netshwinsockreset…

  • java 遍历map集合_Java遍历Map对象的四种方式

    关于java中遍历map具体哪四种方式,请看下文详解吧。方式一:这是最常见的并且在大多数情况下也是最可取的遍历方式。在键值都需要时使用。Mapmap=newHashMap();for(Map.Entryentry:map.entrySet()){System.out.println(“Key=”+entry.getKey()+”,Value=”+entry.g…

  • mybatis if语句_java中的if else语句

    mybatis if语句_java中的if else语句https://www.cnblogs.com/buzheng/p/12485464.htmlMyBatis中if-elseif-else的使用有表user(id,name,state,sex,age)1、单个if-else使用。  根据状态不同进行查询  <selectid=”selectUserByState”resultType=”com.bz.model.entity.User”>SELECT…

发表回复

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

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