jQuery

2024-07-13 22:02| 来源: 网络整理| 查看: 265

随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)

动态请求数据来更新页面是现在非常常用的方法，服务器端通常返回的json格式的数据，如果我们手动的去拼装HTML将是一件非常麻烦的事，而且非常容易出错，因此一些用模版生成HTML的的框架相继出现，jQuery-tmpl 就是其中的一种，jQuery-tmpl是一个简单的模板引擎，能够实现动态的修改DOM数据，使用简单易懂的语法结构，通过JSON的格式传递和绑定数据，这也是jQuery官方团队维护的模板引擎，很不幸的是这个项目将不再提供维护更新，将由JsRender替代。如果你还是喜欢使用jQuery-tmpl，之前的版本依然可以使用，这篇文章将为你详细地介绍如何使用jQuery-tmpl，该插件十分小巧（5.97KB），对于性能的影响并不大。

jQuery-tmpl的几种常用标签分别有：

${}{{each}}{{if}}{{else}}{{html}}

不常用标签是：

1、${}和{{=}}

${}等同于{{=}}，输出变量，${}里面还可以放表达式（=和变量之间一定要有空格，否则无效）

测试jQuery-tmpl的使用 {=}}标签的使用 --> 　　${id} 　　{{= name}} 　　${age} 　　${number} //手动初始化数据 var users = [{id: 1, name: 'xiaoming', age: 12, number: '001'}, {id: 2, name: 'xiaowang', age: 13, number: '002'}]; //调用模板进行渲染 $("#demo").tmpl(users).appendTo('#div_demo');

这是一个完整的例子，先定义一个模板，模板里面定义好怎么展示对应数据，推荐使用${}标签，然后在js里面手动初始化数据，在实际项目中一般通过ajax从服务器上获取，然后调用模板进行渲染，再把渲染后的html加入到指定的标签下。

步骤很简单

1-定义模板，2-渲染，3-处理渲染后html

效果如下：

下面再介绍其他几种标签

2、{{each}}标签

该标签提供循环逻辑，使用$value访问迭代变量，也可以自定义迭代变量(i,value)，下面举个例子说明下两种方式的用法

模板代码：

{each}}标签的使用 --> users {{each(i,user) users}} ${i+1}:${user.name} {{/each}} depart {{each departs}} {{= $value.name}} {{/each}}

js调用代码：

var eachData = { users : [ { name : 'xiaoming' }, { name : 'xiaowang' } ], departs : [ { name : 'IT' }, { name : 'test' } ] }; $("#each").tmpl(eachData).appendTo('#div_each');

代码非常简单，直接上效果图：

3、{{if }} {{else}}标签

选择判断标签，提供了分支逻辑 {{else}} 相当于else if

{if }} {{else}}标签的使用 --> ${id}{{= name}} {{if status}} status:${status} {{else app}} app:${app} {{else}} none {{/if}} var users = [ { id : 1, name : 'xiaoming', status : 1, app : 0 }, { id : 2, name : 'xiaowang', app : 1 }, { id : 3, name : 'xiaogang' } ]; $("#ifelse").tmpl(users).appendTo('#div_ifelse');

模板里面根据if else的判断来决定显示具体数据，效果如下：

4、{{html}}标签，输出变量html,但是没有html编码，适合输出html代码

{html}}标签的使用 --> 　　　　${id} 　　　　${name} 　　${button} 　　{{html button}} var user = { id : 1, name : 'xiaoming', button : 'save' }; $("#html").tmpl(user).appendTo('#div_html');

使用了html标签的html内容自动转成了按钮

5、{{tmpl}}嵌套模板

{tmpl}}嵌套模版、$data的使用 --> 　　${id} 　　{{tmpl($data) '#tmpl2'}} {{each name}} ${$value} {{/each}} var users = [ { id : 1, name : [ 'zhang', 'xiao', 'liang' ] }, { id : 2, name : [ 'li', 'tian', 'ming' ] } ]; $("#tmpl1").tmpl(users).appendTo('#tmpl');

思路就是，在模板1里面嵌套了模板2，模板2的作用就是把name数组连起来显示，这个例子中还使用到了$data标签，$data代表当前的数据。

6、{{wrap}}包装器标签

{wrap}}包装器、$item的使用 --> The following wraps and reorders some HTML content: {{wrap "#tableWrapper"}} One First content Two And more content... {{/wrap}} {{each $item.html("h3", true)}} ${$value} {{/each}} {{each $item.html("div")}} {{html $value}} {{/each}} $('#myTmpl').tmpl().appendTo('#wrap');

在myTmpl模板里面引用了包装器模板tableWrapper来包装myTmpl模板，tableWrapper是一个表格包装模板，把所有h3标签内容作为表格第一行，把所有div下面的标签作为表格的第二行，所以对myTmpl进行了重组，在这个例子中还用到另一个标签$item，代表当前的模板，效果如下：

本文用实际例子介绍了一下jquery.tmpl标签的常见用法，在一般项目中已经够使用了.

了解更多内容，请看GitHub上项目源码:

https://github.com/BorisMoore/jquery-tmpl

【本文地址】

公司简介

联系我们