template.js简单入门
2018-07-27 16:07 糯米粥 阅读(28481) 评论(0) 编辑 收藏 举报template.js是一款开源的JavaScript模板引擎，用来渲染页面的。
github地址 https://github.com/yanhaijing/template.js
下载template.js导入项目中
准备测试的json数据
展示页面
模板文件：用 {{}}做占位符
渲染模板脚本：template(模板名称，数据)
页面效果：
上面是已经最简单的例子。仅仅是显示，但经常会有添加判断，比如：
先修改json数据：
模板文件的if判断，可以看到，需要保存的值可以放在自定义属性中：txt_age="{{age}}"
{{name=="张三"?1:0}}为三元运算符
因为json是一个集合，所以要循环渲染模板，当然也可以在模板中循环，后面会讲
运行结果：可以看到自定义属性保存了值，也展示了效果
当然：上面是循环渲染模板，那么也可以只渲染一次，传一个数组给模板文件，
在模板文件中循环添加数据。用each关键字，这里的data是json的一个对象 json = {data:[],msg:[]}
遍历data就用each data，遍历msg则是each msg 前提它们是数组，通过$value.熟悉名称取值
既然模板文件需要一个数组，那么就得传一个数组过来，这里传json
同样看看效果：
还有就是：虽然传过来的是一个集合。你也可以根据索引来取值，比如：
运行结果就不贴图了
一个简简单单的例子，数据都是模拟数据，仅供参考，测试源代码如下
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Do._default" %> 2 3 <!DOCTYPE html> 4 <%--https://github.com/yanhaijing/template.js--%> 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <script src="jquery-1.10.2.js"></script> 8 <script src="template.js"></script> 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 10 <title></title> 11 <script type="text/javascript"> 12 $(function () { 13 14 //-------------- 15 var json = { 16 name: '张三', 17 age: 18, 18 address: '深圳' 19 }; 20 //$("#warp").append(template("info-tpl", json)); 21 22 //-------------- 23 json = { 24 data: [ 25 { 26 name: '张三', 27 age: 18, 28 address: '深圳' 29 }, 30 { 31 name: '李四', 32 age: 28, 33 address: '深圳' 34 }, 35 { 36 name: '王五', 37 age: 28, 38 address: '深圳' 39 } 40 ], 41 msg: [ 42 { 43 name: '张三11', 44 age: 18, 45 address: '深圳' 46 } 47 ] 48 }; 49 50 //循环渲染模板 51 //$.each(json.data, function (i, v) { 52 // $("#warp").append(template("info-tpl1", v)); 53 //}); 54 55 //-------------- 56 //$("#warp").append(template("info-tpl2", json)); 57 58 $("#warp").append(template("info-tpl3", json)); 59 60 }) 61 </script> 62 </head> 63 <body> 64 <form id="form1" runat="server"> 65 <!--展示部分显示--> 66 <div id="warp"> 67 </div> 68 </form> 69 </body> 70 </html> 71 <!--简单模板文件--> 72 <script id="info-tpl" type="text/html"> 73 <div>{{name}}</div> 74 <div>{{age}}</div> 75 </script> 76 77 <!--条件判断：模板文件--> 78 <script id="info-tpl1" type="text/html"> 79 <div txt_age="{{age}}"><!--txt_age为自定义属性--> 80 {{if name=="张三"}} 81 <label style="color: red;">{{name}}</label> 82 {{else if name=="李四"}} 83 <label style="color: plum;">{{name}}</label> 84 {{else}} 85 <label style="color: blue;">{{name}}</label> 86 {{/if}} 87 88 {{name=="张三"?1:0}} 89 </div> 90 </script> 91 92 <!--索引取值：模板文件--> 93 <script id="info-tpl2" type="text/html"> 94 <div> 95 {{data[0].name}} 96 </div> 97 <div> 98 {{data[1].name}} 99 </div> 100 </script> 101 102 103 <script id="info-tpl3" type="text/html"> 104 <div> 105 <select class="form-control" style="width: 100px;"> 106 {{each data}} 107 <option id="{{$value.age}}">{{$value.name}}</option> 108 {{/each}} 109 </select> 110 </div> 111 </script>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
2013-07-27 dialog提交表单