js模板引擎mustache用法

# js 模板引擎 mustache 用法

本文讲述 js 模板引擎 mustache 的基础用法。mustache.js 是一个简单强大的 Javascript 模板引擎，使用它可以简化在 js 代码中的 html 编写，压缩后只有 9KB，非常值得在项目中使用。

# 一. 使用步骤

# 1. 引入 mustachejs 库

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.0.0/mustache.min.js"></script>
</head>

# 2. 定义父容器

<body>
    <!-- 定义用于渲染数据的父容器 -->
    <div id="userList"></div>
</body>

# 3. 定义模板

<!-- 定义模板 -->
  <script id="userListTemplate" type="x-tmpl-mustache">
      <ul>
      {{# userList}}
      <li>
        {{ name }} {{ sex }} {{ age }}
      </li>
      {{/ userList}}
    </ul>
</script>

# 4.准备数据

var data = {
      userList: [
        {
          name: "张三",
          sex: "男",
          age: 10
        },
        {
          name: "李四",
          sex: "女",
          age: 23
        }
      ]
    };

# 5. 基于模板生成 html 片段

var userListTemplate = document.getElementById("userListTemplate")
      .innerHTML;
// 将数据渲染到模板上，生成html片段
var html = Mustache.render(userListTemplate, data);

# 6.将 html 片段插入到父容器中

// 将html片段插入到父容器中
document.getElementById("userList").innerHTML = html;

# 二. 完整的示例代码

<html>
  <head>
    <script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.0.0/mustache.min.js"></script>
  </head>
  <body>
    <!-- 定义用于渲染数据的父容器 -->
    <div id="userList"></div>
  </body>
  <!-- 定义模板 -->
  <script id="userListTemplate" type="x-tmpl-mustache">
      <ul>
      {{# userList}}
      <li>
        {{ name }} {{ sex }} {{ age }}
      </li>
      {{/ userList}}
    </ul>
  </script>

  <script type="text/javascript">
    var data = {
      userList: [
        {
          name: "张三",
          sex: "男",
          age: 10
        },
        {
          name: "李四",
          sex: "女",
          age: 23
        }
      ]
    };

    var userListTemplate = document.getElementById("userListTemplate")
      .innerHTML;
    // 将数据渲染到模板上，生成html片段
    var html = Mustache.render(userListTemplate, data);
    // 将html片段插入到父容器中
    document.getElementById("userList").innerHTML = html;
  </script>
</html>

#mustache

上次更新: 2020-09-18 18:28:18

← http请求库axios的用法 javascript多边形计算库jsclipper的用法→