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>

使用介绍：

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

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

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

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

还可以自定义函数等等。

————————————————

版权声明：本文为CSDN博主「renhuan28」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/renhuan28/article/details/81867141