juicer.js的使用

juicer.js的使用

​ juicer.js是阿里的一个轻量级模板引擎，使用他可以在纯html上使用el表达式。

先举例代码：

html：

<div>
    <button type="button" id="query-dlq-config" class="btn btn-sm btn-primary"><i
    class="fa fa-dot-circle-o"></i> 查询</button>
</div>
<div class="row" id="student-info">
     <!--学生信息查询功能模版......-->
</div>

<!--学生信息查询功能模版-->
<script id="student-info-script" type="text/template">
  <table class="table">
    <thead>
    <tr>
      <th>学生ID</th>
      <th>学生名字</th>
      <th>是否新生</th>
      <th>更改</th>
    </tr>
    </thead>
    <tbody>
    {@each studentInfos as studentInfo}
    <tr>
      <td>${studentInfo.studentId}</td>
      <td>${studentInfo.studentName}</td>
      <td>
        <select id="is-active">
          {@if studentInfo.isNew === "false"}
          <option value="false" selected>false</option>
          <option value="true">true</option>
          {@else}
          <option value="false">false</option>
          <option value="true" selected>true</option>
          {@/if}
        </select>
      </td>
      <th><a href="#" name="${student.sudentId}" id="update-student-info">更改</a></th>
    </tr>
    {@/each}
    </tbody>
  </table>
</script>

javascript:

 function queryStudentInfo(studentId) {
    $.ajax({
      type: "post",
      dataType: "json",
      contentType: "application/json",
      url: "/student/queryStudentInfo",
      async: false,
      data: JSON.stringify({
        "studentId": studentId
      }),
      success: function (res) {
        //新建数组用于存调到的数据
        var studentInfos = [];
        if (res) {
          res.forEach(function (entry) {
            studentInfos.push(entry);
          })
        }
        //新建变量用于存页面模版
        var $studentInfos = $("#student-info-script").html();
        //利用juicer将模版和数据放入页面指定位置
        $("#student-info").html(
            juicer($studentInfos, {"studentInfos": studentInfos})
        );
        dlqConfigUpdate();
      },
      error: function (reserr) {
        notie.alert({
          type: 3,
          text: reserr,
          stay: false,
          time: 3,
          position: "top"
        })
      }
    })
  }

jar:

我用的<script src="js/libs/juicer-min.js"></script>

使用介绍：

1. 在html上要建立个模版，即一个用script标签包住的html，这样模版里便可以使用juicer的标签和表达式了；

2. 在js里调juicer方法，即juicer(“模版”,”放入模版的数据”)，并指定将模版放入html页面什么位置；

3. 模版里可以用 {@each studentInfos as studentInfo} 。。。 {@/each}遍历数据

   可以用 {@if studentInfo.isNew === “false”}。。。 {@else}。。。{@/if}的选择标签

   还可以自定义函数等等。

​

本文出自：https://blog.csdn.net/renhuan28/article/details/81867141