<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>artTemplate</title> </head> <body> <div> </div> <script src="https://www.jb51.net/js/artTemplate3/template.js" type="text/javascript" charset="utf-8"></script> <script type="text/html"> {{if isShow}} <h2>姓名：{{name}}</h2> <ul> {{each hobbies as hobby index}} <li> {{index+1}} {{hobby}} </li> {{/each}} </ul> {{/if}} </script> <script type="text/javascript"> var data={ isShow:true, name:"Tom", hobbies:["看书","上网","运动","电影","购物"] }; //用数据与模板渲染(render)出结果 var html=template("template1",data); document.getElementById("result").innerHTML=html; </script> </body> </html>
运行结果：
生成的代码：
<h2>姓名：Tom</h2> <ul> <li> 看书 </li> <li> 上网 </li> <li> 运动 </li> <li> 电影 </li> <li> 购物 </li> </ul>
5.2、方法
1)、template(id, data)
根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。
如果没有 data 参数，那么将返回一渲染函数。
2)、template.compile(source, options)
将返回一个渲染函数。演示
3)、template.render(source, options)
将返回渲染结果。
4)、template.helper(name, callback)
添加辅助方法，让模板引擎调用自定义的javascript方法。
5)、template.config(name, value)
示例代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>artTemplate</title> </head> <body> <div> </div> <script src="https://www.jb51.net/js/artTemplate3/template.js" type="text/javascript" charset="utf-8"></script> <script type="text/html"> $$if isShow## <h2>姓名：$$name##</h2> <ul> $$include "template2"## <!--包含模板2--> </ul> $$/if## </script> <script type="text/html"> $$each hobbies as hobby index## <li> $$index+1## $$#hobby## <!--默认会转义，加#号不转义--> </li> $$/each## </script> <script type="text/javascript"> var data={ isShow:true, name:"Tom", hobbies:["看书","上网","运动","<b>电影</b>","<i>购物</i>"] }; //逻辑语法开始标签 template.config("openTag","$$"); //逻辑语法结束标签 template.config("closeTag","##"); //不转义 template.config("escape",false); //用数据与模板渲染(render)出结果 var html=template("template1",data); document.getElementById("result").innerHTML=html; </script> </body> </html>
运行结果：
5.3、与AJAX结合应用
示例脚本：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商品管理</title> <meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> @CHARSET "UTF-8"; * { margin: 0; padding: 0; font-family: microsoft yahei; font-size: 14px; } body { padding-top: 20px; } .main { width: 90%; margin: 0 auto; border: 1px solid #777; padding: 20px; } .main .title { font-size: 20px; font-weight: normal; border-bottom: 1px solid #ccc; margin-bottom: 15px; padding-bottom: 5px; color: blue; } .main .title span { display: inline-block; font-size: 20px; background: blue; color: #fff; padding: 0 8px; background: blue; } a { color: blue; text-decoration: none; } a:hover { color: orangered; } .tab td, .tab, .tab th { border: 1px solid #777; border-collapse: collapse; } .tab td, .tab th { line-height: 26px; height: 26px; padding-left: 5px; } .abtn { display: inline-block; height: 20px; line-height: 20px; background: blue; color: #fff; padding: 0 5px; } .btn { height: 20px; line-height: 20px; background: blue; color: #fff; padding: 0 8px; border: 0; } .abtn:hover, .btn:hover { background: orangered; color: #fff; } p { padding: 5px 0; } fieldset { border: 1px solid #ccc; padding: 5px 10px; } fieldset legend { margin-left: 10px; font-size: 16px; } .pic { height: 30px; width: auto; } #divFrom { display: none; } </style> </head> <body> <div> <h2><span>商品管理</span></h2> <table> <tr> <th>编号</th> <th>图片</th> <th>商品名</th> <th>价格</th> <th>详细</th> <th>操作</th> </tr> </table> <p></p> <p> <a href="#">添加</a> <input type="submit" value="删除选择项" /> </p> <div> <form> <fieldset> <legend>添加商品</legend> <p> <label for="name"> 名称： </label> <input type="text" /> </p> <p> <label for="price"> 价格： </label> <input type="text" /> </p> <p> <label for="detail"> 详细： </label> <textarea cols="60"></textarea> </p> </fieldset> </form> </div> </div> <link type="text/css" href="https://www.jb51.net/js/artDialog6/ui-dialog.css" /> <script src="https://www.jb51.net/js/artTemplate3/template.js" type="text/javascript" charset="utf-8"></script> <script src="https://www.jb51.net/js/jQuery1.11.3/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://www.jb51.net/js/artDialog6/dialog-min.js" type="text/javascript" charset="utf-8"></script> <!--[if (IE 8)|(IE 9)]> <script src="https://www.jb51.net/js/jquery.transport.xdr.min.js" type="text/javascript" charset="utf-8"></script> <![endif]--> <script type="text/html"> {{each list as pdt}} <tr> <td>{{pdt.id}}</td> <td><img src="https://localhost:8087/JavaScript001/images/{{pdt.picture}}"></td> <td>{{pdt.name}}</td> <td>{{pdt.price | round:'￥'}}</td> <td>{{pdt.detail}}</td> <td> <a href="#" data-id={{pdt.id}}>删除</a> </td> </tr> {{/each}} </script> <script type="text/javascript"> var app = { url: "http://localhost:8087/JavaScript001/", //提供服务的域名 add: function() { var d = dialog({ title: '添加商品', content: $('#divFrom').html(), okValue: '添加', modal: true, backdropOpacity: 0.3, ok: function() { var that = this; $.ajax({ type: "post", data: $(".ui-dialog #formPdt").serialize() + "&act=add", success: function(data) { if(data) { app.log("添加成功!"); app.loadAll(); that.close(); } else { app.log("添加失败!"); } } }); return false; }, cancelValue: '关闭', cancel: function() { alert('你点了取消按钮') }, onclose: function() { alert("关闭了"); } }); d.show(); }, del: function() { id = $(this).data("id"); var that = $(this); $.ajax({ type: "get", data: { "id": id, "act": "del" }, success: function(data) { if(data) { that.closest("tr").remove(); app.log("删除成功!"); } else { app.log("删除失败!"); } } }); }, loadAll: function() { $.ajax({ type: "get", data: { "act": "getAllCORS" }, success: function(data) { $("#tabGoods tr:gt(0)").remove(); $("#tabGoods").append(template("tmpl",{list:data})); } }); }, init: function() { /*动态绑定删除事件*/ $("#tabGoods").on("click", "a.del", {}, app.del); /*绑定添加事件*/ $("#btnSave").click(app.add); /*设置全局AJAX默认值*/ $.ajaxSetup({ dataType: "json", url: app.url + "Product?type=meat-and-filler&format=json", beforeSend: app.ajaxBefore, complete: app.clearMsg, error: function(xhr, textStatus, errorThrown) { app.log("错误" + textStatus + errorThrown); } }); //为模板引擎定义辅助函数 template.helper("round",function(value,mark){ return (mark||"")+Math.round(value); }); this.loadAll(); }, clearMsg: function() { this.box.remove(); }, ajaxBefore: function() { this.box = dialog({ modal: true }); this.box.show(); }, log: function(msg) { $("#message").html(msg); } }; app.init(); </script> </body> </html>
运行结果：
六、示例下载