使用模板引擎渲染列表

使用模板引擎渲染列表

前题：

1.启动服务器，node .\app.js

2.将文档doc>index.html打开

3 引入js数据

  <script src="./libs/template-web.js"></script>

第一步: 静态结构

 <tr>
         <td>1</td>
         <td>大乔</td>
         <td>大</td>
         <td>100</td>
         <td>50</td>
         <td><img src=""></td>
         <td>
         <button type="button" class="btn btn-warning">上传头像</button>
         <button type="button" class="btn btn-danger">删除</button>
      </td>
  </tr>

第二步：使用ajax获取数据

<script>
    // 函数入口
    $(function () {
      $.ajax({
        type:'get', //方式
        url: 'http://127.0.0.1:3001/getProductList',//地址
        dataType: 'json',//数据类型
        // 函数回调res
        success: function (res) {
          console.log(res);
        }
      })
    })
 </script>

第三步：分析数据

找到数据与模板对应

第四步：创建模板结构

注意要避免在遍历里面写注释

数据应该是个对象

 <!-- 遍历创建模板结构 -->
  <script type="text/template" id="xiaoTemp">
    {{each}}
      <tr>
            <td>1</td>
            <td>大乔</td>
            <td>大</td>
            <td>100</td>
            <td>50</td>
            <td><img src=""></td>
            <td>
              <button type="button" class="btn btn-warning">上传头像</button>
              <button type="button" class="btn btn-danger">删除</button>
            </td>
          </tr>
    {{/each}}
  </script>

第五步：调用模板引擎

模板中使用你所传入的数据对象的属性名称，他会根据属性名称找到对应的值来使用

遍历data意味着后期根据所传入的res对象获取data属性的值（数组）来使用

res是对象

<!-- 遍历创建模板结构 -->
  <!-- $index:索引 $value:代表数据的成员 -->
  <!-- each 遍历的对象或数组 v=== $value  i===$index -->
  <script type="text/template" id="xiaoTemp">
    {{each data v i}}
      <tr>
        <td>{{i+1}}</td>
        <td>{{v.name}}</td>
        <td>{{v.subName}}</td>
        <td>{{v.marketPrice}}</td>
        <td>{{v.memberPrice}}</td>
        <td><img src="{{v.src}}"></td>
        <td>
          <button type="button" class="btn btn-warning">上传头像</button>
          <button type="button" class="btn btn-danger">删除</button>
        </td>
      </tr>
    {{/each}}
  </script>

调用模板引擎

$.ajax({
        url: 'http://127.0.0.1:3001/getProductList',
        dataType: 'json',
        success: function (res) {
          // console.log(res);
          if (res.code == 200) {
            // 调用模板引擎
            let html = template('xiaoTemp', res)
            console.log(html);           
          }
        }
      })

第六步：填充到指定位置

 <!-- 表格主体 -->
        <tbody id="tbody">
          <!-- tr 是一行内容 -->

        </tbody>

  $('#tbody').html(html)

位置

 <!-- 表格主体 -->
        <tbody id="tbody">
          <!-- tr 是一行内容 -->

        </tbody>

  $('#tbody').html(html)