51工具盒子# js 模板引擎 mustache 用法 {#js-模板引擎-mustache-用法}
本文讲述 js 模板引擎 mustache 的基础用法。mustache.js 是一个简单强大的 Javascript 模板引擎，使用它可以简化在 js 代码中的 html 编写，压缩后只有 9KB，非常值得在项目中使用。
# 一. 使用步骤 {#一-使用步骤}
# 1. 引入 mustachejs 库 {#_1-引入-mustachejs-库}
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.0.0/mustache.min.js"></script>
</head>
# 2. 定义父容器 {#_2-定义父容器}
<body>
<!-- 定义用于渲染数据的父容器 -->
<div id="userList"></div>
</body>
# 3. 定义模板 {#_3-定义模板}
<!-- 定义模板 -->
<script id="userListTemplate" type="x-tmpl-mustache">
<ul>
{{# userList}}
<li>
{{ name }} {{ sex }} {{ age }}
</li>
{{/ userList}}
</ul>
</script>
# 4.准备数据 {#_4-准备数据}
var data = {
userList: [
{
name: "张三",
sex: "男",
age: 10
},
{
name: "李四",
sex: "女",
age: 23
}
]
};
# 5. 基于模板生成 html 片段 {#_5-基于模板生成-html-片段}
var userListTemplate = document.getElementById("userListTemplate")
.innerHTML;
// 将数据渲染到模板上，生成html片段
var html = Mustache.render(userListTemplate, data);
# 6.将 html 片段插入到父容器中 {#_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>
