jQuery-tmpl

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

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

${}
{{each}}
{{if}}
{{else}}
{{html}}
不常用标签是：

{{=}}
{{tmpl}}
{{wrap}}
1、${}和{{=}}

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="../js/jquery.js"></script>
    <script src="../js/jquery.tmpl.js"></script>
    <title>测试jQuery-tmpl的使用</title>
</head>
<body>
<div id="div_demo"></div>
</body>
<!-- 模板1，测试${}、{{=}}标签的使用 -->
<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;">${age}</span>
    　　<span style="margin-left:10px;">${number}</span>
    </div>
 
</script>
<script type="text/javascript">
    //手动初始化数据
    var users = [{id: 1, name: 'xiaoming', age: 12, number: '001'}, {id: 2, name: 'xiaowang', age: 13, number: '002'}];
    //调用模板进行渲染
    $("#demo").tmpl(users).appendTo('#div_demo');
</script>
</html>

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

步骤很简单

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

效果如下：

 

 

 

 

原文链接：https://blog.csdn.net/u010142437/article/details/84399222

posted @ 2022-07-08 19:18  aaa111js  阅读(224)  评论(0)    收藏  举报