代码改变世界

template.js简单入门

2018-07-27 16:07  糯米粥  阅读(28310)  评论(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>
View Code

 

template.js