前端-使用template-web.js【模版引擎】渲染数据

通过ajax请求到的数据，使用传统的拼接字符串也可以做到，但是‘ “ ” ‘这种模式，单引号、双引号容易扩错，新手入门推荐使用这种，初入前端，需要一个一个敲代码体会一下。

使用 template.js 使用效果更佳；

Demo效果图-下面上源码

源码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>火车票查询</title>
  8     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  9     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
 10     <script src="js/template-web.js"></script>
 11     <style>
 12         .table>thead>tr>th{
 13             text-align: center;
 14         }
 15     </style>
 16 </head>
 17 
 18 <body>
 19 
 20     <div class="container">
 21         <div class="col-md-12">
 22             <form class="">
 23                 <div class="form-group ">
 24                     <label for="startCity">始发站</label>
 25                     <input type="text" class="form-control" placeholder="北京" id="startCity" value="嘉兴">
 26                 </div>
 27                 <div class="form-group">
 28                     <label for="endCity">终点站</label>
 29                     <input type="text" class="form-control" placeholder="上海" id="endCity" value="上海">
 30                 </div>
 31                 <button type="button" class="btn btn-primary" id="Serach" style=" 100%;">查询</button>
 32             </form>
 33         </div>
 34         <div class="col-md-12">
 35             <div class="panel panel-default">
 36                 <!-- Default panel contents -->
 37                 <div class="panel-heading">火车列表</div>
 38                 <table id="table" class="table text-center table-hover">
 39                     <thead>
 40                         <tr >
 41                             <th>序号</th>
 42                             <th>车次</th>
 43                             <th>类型</th>
 44                             <th>始发站</th>
 45                             <th>终点站</th>
 46                             <th>出发时间</th>
 47                             <th>到达时间</th>
 48                             <th>用时</th>
 49                             <th>预定</th>
 50                         </tr>
 51                     </thead>
 52                     <tbody>
 53                     </tbody>
 54                 </table>
 55             </div>
 56         </div>
 57 
 58     </div>
 59     </div>
 60     <script>
 61         $(function () {
 62             $('#Serach').on('click', () => {
 63                 var start = $('#startCity').val();
 64                 var end = $('#endCity').val();
 65                 $.ajax({
 66                     type: 'get',
 67                     url: 'http://api.jisuapi.com/train/station2s',
 68                     data: {
 69                         appkey: 'XXXXXXX', //密钥需要自己申请
 70                         start: start,
 71                         end: end
 72                     },
 73                     dataType: "jsonp",
 74                     jsonp: "callback",
 75                     success: data => {
 76                         $('#table tbody').html(null);
 77                         console.log(data);
 78                         
 79                         var htmlStr = template('templateId', data);
 80                         console.log(htmlStr);
 81 
 82                         $('#table tbody').append(htmlStr);
 83                     }
 84                 })
 85             });
 86             $('#table tbody').delegate('button', 'click', function () {
 87                 console.log('获取' + this.dataset.trainno + '列车');
 88             });
 89         });
 90     </script>
 91     <script type="text/template" id="templateId">
 92         <%for (var i = 0;i < result.list.length; i++ ){ %>
 93         <tr >
 94             <td ><%=i%></td>
 95             <td ><%=result.list[i].trainno%></td>
 96             <td ><%=result.list[i].typename%></td>
 97             <td ><%=result.list[i].station%></td>
 98             <td ><%=result.list[i].endstation%></td>
 99             <td ><%=result.list[i].departuretime%></td>
100             <td ><%=result.list[i].arrivaltime%></td>
101             <td ><%=result.list[i].costtime%></td>
102             <td ><button type="button" class="btn btn-primary" data-trainno="<%=result.list[i].trainno%>">预定</button></td>
103         </tr>
104        <%}%>
105     </script>
106 </body>
107 </html>

使用说明

        1、引入模版文件 template-web.js
        2、创建模版 <script type="text/template" id="templateId"></script>
        3、将数据跟模版进行绑定，调用 template-web.js 下面的template方法，模版的id，需要解析的数据。
        4、假设我将数据跟模版绑定后，模版文件 template-web.js 就会去解析模版里面的内容。
        5、要准备模版的里面的内容，模版里面的内容写到页面里面的标签有关系。
        6、我需要模版里面去解析数据，我需要在模版里面去解析数据。
        7、在模版里面解析数据，模版提供两种语法。
            1、一种是原生的语法。
            2、新语法。
            模版里面支持两种类型的标签<% %> 是用写逻辑的，里面都是js逻辑代码