当前位置:首页 > 日记 > 正文

使用模板生成HTML使用详细的解决方案的框架jquery.tmpl

使用模板生成HTML使用详细的解决方案的框架jquery.tmpl
动态请求更新页面的数据现在是一种非常常见的方法,如博客评论分页、动态加载、微博客的滚动负载和定时请求加载。

在这些情况下,动态请求返回的数据通常不是HTML、JSON或XML。简言之,数据在浏览器端并不拼写服务器端的数据,但是从传输的角度来说,返回HTML是不划算的,而在Web传输中,更多的是使用JSON而不是XML。

浏览器端基于JSON生成HTML。真令人苦恼。当结构不复杂时,它会很好。如果结构复杂,它就会死亡。它需要仔细仔细地编写Javascript代码,这几乎是不可能维持的。

因此,一些用模板生成HTML的框架就是其中之一。让我们详细描述了一jquery.tmpl使用。

以下是使用方法的重点:

首先,介绍模板和数据,并不是说二者缺一不可。

定义模板有两种方法,下面给出一个特定的代码

复制代码代码如下所示:

var标记一些内容:$ }

+ 更多的内容:自我价值$ { }。;

美元。模板(movietemplate
复制代码代码如下所示:
$ {姓名}($ { releaseyear })
这样,定义了两个模板,第一个是用脚本编写的,另一个是用HTML编写的。

JSON数据

下面开始渲染模板

复制代码代码如下所示:

$(# movietemplate ),Tmpl(电影),AppendTo(# movielist );

美元。源(movietemplate
注意:电影是一组JSON数据。

复制代码代码如下所示:

var电影= {

{名称:红色小提琴

{名称:睁大眼睛

{名称:继承

};
对于jquery.tmpl几种常见的标签:

{ { },{ } },{ } },{ } },{ },{ } },{ } },{ } }

不经常使用的标签

{ { { { = } } } },{ {说明书和包装} }。

与输出变量相等,也可以放在$表达式(=和变量之间必须有空格,否则无效)。

实例:

复制代码代码如下所示:

$ }

{名称}

{ $(数字)+ 1 }

{状态}

无功用户ID:'think8848'name:{ {,约瑟夫陈,Num:1,现状:1 },{编号:'acloud,名称:玛丽祥,号:2} };

$(#演示)。Tmpl(用户),AppendTo(# div_demo);
{每个}提供循环逻辑,$值访问迭代变量也可以定制迭代变量(i,value)。

实例:

复制代码代码如下所示:

用户

{每个(i,用户)用户}

$ { 1 + }:{用户名称}

{如果i = 0 } }



{每个(j,组)组}

$组名称}

{每个} }

{如果} }

{一} } { /

离开

{每个离开} }

{ $ value。名称}

{每个} }
VaR数据= { } {用户:名称:{ { 'jerry,姓名:约翰} },组:名称:'mingdao{ { },{姓名:} 'meihua{姓名:,测试} },{ {离开:名字:} } };

$(#每个),Tmpl(数据),AppendTo(# div_each);
{ { } }如果逻辑的{ } }分支,{ } }则提供其他的等价物

实例:

复制代码代码如下所示:
$ { } }

{ if状态}

状态$ {状态}

{其他应用程序}

应用程序应用程序}

{ } }

没有

{如果} }

无功用户ID:'think8848'name:{ {,约瑟夫陈,状态:1、应用:0 },{编号:'acloud,名称:玛丽祥,应用程序:1 },{编号:'bmingdao,名称:'jerry金} };

$(# ifelse)。Tmpl(用户),AppendTo(# div_ifelse);
输出变量HTML,但没有HTML代码,适合输出HTML代码

例子

复制代码代码如下所示:

$ }

{名称}

{ }

{

无功用户= {编号:'think8848,名称:约瑟夫陈,HTML:'html};

$(# HTML)。Tmpl(用户),AppendTo(# div_html);
{ {源} }嵌套模板

例子

复制代码代码如下所示:

$ }

{ {源($数据)的# tmpl2} }

{每一个名称}
用户ID:'think8848 VaR{ {,名称:{约瑟夫,'chan} },{编号:'acloud,名称:{玛丽,'cheung} } };

$(# tmpl1)。Tmpl(用户),AppendTo(#说明书);
{包装},包装器

例子

复制代码代码如下所示:

下面的包装和重新排序的一些HTML内容:

{ {包# tablewrapper} }


第一个内容

更多的内容…
{ } }

{ {每人item.html(H3,真的)} }
$ $ }
{每个} }
{ {每item.html美元(div)} }
{ $ } }
{一} } { /

$(函数(){())

$(# mytmpl)。Tmpl(),AppendTo(# wrapdemo);

});
$数据项$ $代表当前模板;$代表当前数据。

实例uff1a

复制代码代码如下所示:

$

$ { $ item.getname()}

U3000 U3000 U3000
用户ID:'think8848 VaR{ {,名称:{约瑟夫,'chan} },{编号:'acloud,名称:{玛丽,'cheung} } };

$(# item_data)。Tmpl(用户,

{

getName:功能(SPR){

返回this.data.name.join(SPR);

}

})。AppendTo(# div_item_data);
美元。tmplitem()方法,使用这种方法,可以从元素的渲染检索项美元

例子

复制代码代码如下所示:
$(#演示),委托('div ',点击',功能()){

VAR项=美元。tmplitem(本);

警报(项目,数据,名称);

});

相关文章

Corel敲除的例子:如何引导抠图抠图

Corel敲除的例子:如何引导抠图抠图

抠图,对象,例子,电脑软件,Corel,本教程Corel敲除的实例是阴影抠图方法指导,如何也要拉的对象,本教程很简单,对于新手来说是值得学习的,我希望你喜欢推荐。 第三课是对象阴影课,介绍如何在拾取物体时同时拾取物体的阴影。 *如何隐藏选举路线; *…

介绍不同排版方法和技巧的(全面)

介绍不同排版方法和技巧的(全面)

方法,技巧,电脑软件,本教程是向朋友介绍不同排版方法和技巧的图片,通过本教程,希望大家能掌握排版的要点。 本教程是向朋友们介绍不同排版方法和技巧的图片,通过本教程,希望大家能掌握排版的要点。教程很实用,初学者不能错过。推荐一下,希望大家…

CDR制作精美圣诞卡

CDR制作精美圣诞卡

精美,圣诞卡,电脑软件,CDR,本教程是一个简短的介绍一个朋友谁使用CDR制作美丽的圣诞卡。教程制作的卡片非常漂亮。该方法非常简单,适合初学者。 本教程将向您介绍制作美丽圣诞卡的CDR。教程制作的卡片很漂亮。本教程很基础,适合初学者学习。…

ps如何创建一个图层副本和一个隐藏

ps如何创建一个图层副本和一个隐藏

副本,图层,方法,创建一个,电脑软件,本文介绍了ps如何建立一个层拷贝和一个小秘密,很少有人知道ps层的副本。 本文介绍了ps如何建立一个层拷贝和一个小秘密,很少有人知道ps层的副本。 首先,ps建立了图层副本的含义。 一个成员问ps如何创建该…

背景中得到zTree选中节点的方法

背景中得到zTree选中节点的方法

方法,节点,景中,电脑软件,zTree,本文介绍了在后台获取zTree选定节点的方法,分享给你参考。具体实现的方法如下: 函数计数(){ VaR zTree =美元。fn.ztree.getztreeobj(classpurview ); checkcount = ztree.getcheckednodes(真的); 无功classpurview =…

两阵与array_merge相结合的方法()函

两阵与array_merge相结合的方法()函

方法,函数,电脑软件,array_merge,PHP,本文说明了PHP结合两个数组与array_merge()函数。分享给你供你参考。具体分析如下: PHP合并两个阵列的array_merge()函数。array_merge()是一个PHP函数,用于合并两个或两个以上阵列。后一个数组将追加到前面的…

js实现自定义的右键行为。

js实现自定义的右键行为。

右键,自定义,电脑软件,js,自定义鼠标通过事件对象的右键行为(x,y) 演示 html { 身高:100%; } 体{ 身高:100%; } # mydiv { 宽度:300px; 身高:300px; 背景颜色:# ff7400; } # ctxmenu { 背景颜色:# ff7400; 列表样式类型:无; 位置:绝对; 填料:0px; 边境:1px soli…

Javascript中高阶函数的介绍

Javascript中高阶函数的介绍

高阶函数,电脑软件,Javascript,这是一个有趣的事情,这也可能是Javascript对象的强度的指示。我们需要做的是输出hello和世界,和输入打印(你好)(世界的),这就是所谓的高阶函数。 高阶函数 高阶看起来像是高级编程技术的一个深层次,我一开始就看到了。 j…

PS批处理PS照片批量处理

PS批处理PS照片批量处理

批处理,批量处理,照片,电脑软件,PS,我想你们都有这样的经验,有很多图片要处理,但是他们重复同样的处理动作。我们需要一个一个地打开并逐一存储。有什么简单的方法吗是的,当然。下面的小编辑将介绍ps如何批量处理照片,希望对你有所帮助。 PS的…

鼠标诱导向下滑动隐藏菜单的js实现

鼠标诱导向下滑动隐藏菜单的js实现

菜单,鼠标,诱导,电脑软件,js,本文介绍了js实现鼠标感应向下滑动隐藏菜单的方法,供大家参考,具体实现方法如下: 复制代码代码如下所示: 隐藏在网页左上角的隐藏菜单,可以从鼠标中滑出。 { # D1 background-color:蓝色; border-bottom:白2px开始; …

订购关联数组的键的ksort方法()函数

订购关联数组的键的ksort方法()函数

函数,方法,数组,电脑软件,ksort,本文的方法使用PHP ksort()函数通过键的关联数组的顺序。分享给你供你参考。具体分析如下: PHP通过ksort()函数关联数组键排序,ksort功能根据关联数组键正排序,如果你想扭转krsort可以哦()函数 第一个=数组()5,2,1; Ksort…

PS绘制酷霸气暗黑破坏神3壁纸

PS绘制酷霸气暗黑破坏神3壁纸

壁纸,绘制,霸气,暗黑破坏神,电脑软件,本教程是介绍朋友用PS来画一个炫酷霸气的暗黑3壁纸,渲染出来的壁纸真的很酷,不是很难,推荐喜欢的朋友可以跟着教程一起学习。 本教程是介绍一个朋友PS来绘制一个炫酷霸气的暗黑3壁纸教程的方法,画出来的真…