在 JavaScript Mustache 教程中，我们展示了如何使用 Mustache 模板引擎。
胡子
胡子 是一个简单的网页模板系统。它适用于许多编程语言，包括 JavaScript 和 Java。 Mustache 被描述为无逻辑模板引擎，因为它没有任何显式控制流语句，例如 if 和 else 条件语句或 for 循环。可以使用节标记处理列表和 lambda 来实现循环和条件评估。
JSON（JavaScript 对象显示法） 是一种轻量级数据交换格式。人类易于读写，机器易于解析和生成。 application/json 是 JSON 的官方互联网媒体类型。 JSON 文件扩展名为 .json。
查询 是一个用于操作 DOM 的 JavaScript 库。使用 jQuery，我们可以查找、选择、遍历和操作 HTML 文档的各个部分。
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
Mustache 是一个 JavaScript 库，可以从 CDN（内容分发网络）引用。
小胡子基本模板示例
在第一个示例中，我们有一个基本的模板示例。
basic.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Mustache template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
</head>
<body>
<div id="mypanel"></div>
<button id="btn">Load</button>
<script>
$("#btn").on('click', function() {
var data = { name: "Jonathan" };
var template = "Hello {{ name }}";
var text = Mustache.render(template, data);
$("#mypanel").html(text);
});
</script>
</body>
</html>
单击按钮，我们会在页面上收到一条消息。
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
在示例中，我们使用 JQuery 和 Mustache JavaScript 库。
$("#btn").on('click', function() {
...
}
我们创建一个响应按钮单击事件的处理程序。
var data = { name: "Jonathan" };
这是数据。
var template = "Hello {{ name }}";
这是小胡子模板。 {{ name }} 是一个用数据值替换的 Mustache 标签。
var text = Mustache.render(template, data);
最终输出使用 Mustache.render 函数呈现。模板引擎将模板与数据连接起来以生成输出。
$("#mypanel").html(text);
呈现的文本被写入面板元素。
使用模板标签的小胡子
在第二个例子中，我们使用了一个模板标签。目前使用
json_url.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Mustache template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
</head>
<body>
<script id="mp_template" type="text/template">
Date: {{ time }}
<br>
Time: {{ date }}
<br>
Unix time: {{ milliseconds_since_epoch }}
</script>
<div id="mypanel"></div>
<button id="btn">Load</button>
<script>
$(function() {
$("#btn").on('click', function() {
$.getJSON('http://time.jsontest.com', function(data) {
var template = $("#mp_template").html();
var text = Mustache.render(template, data);
$("#mypanel").html(text);
});
});
});
</script>
在此示例中，我们向 time.jsontest.com 发出请求，它返回具有三个属性的 JSON 响应：time、date 和 milliseconds_since_epoch（Unix 时间）。
<script id="mp_template" type="text/template">
Date: {{ time }}
<br>
Time: {{ date }}
<br>
Unix time: {{ milliseconds_since_epoch }}
</script>
我们在
$.getJSON('http://time.jsontest.com', function(data) {
使用 $.getJSON，我们使用 GET HTTP 请求从服务器加载 JSON 编码的数据。
var template = $("#mp_template").html();
通过 JQuery 的 html 方法，我们得到了模板数据。
var text = Mustache.render(template, data);
使用 Mustache.render 呈现输出。
$("#mypanel").html(text);
最终文本被写入面板元素。
带有 Java Servlet 的小胡子
在第三个示例中，我们创建了一个带有 servlet 的 Java Web 应用程序。
$ tree
.
├── pom.xml
└── src
├── main
│ ├── java
│ │ └── com
│ │ └── zetcode
│ │ ├── bean
│ │ │ └── City.java
│ │ └── web
│ │ └── GetCities.java
│ └── webapp
│ ├── index.html
│ ├── META-INF
│ │ └── context.xml
│ └── WEB-INF
└── test
└── java
这是项目结构。
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.zetcode</groupId>
<artifactId>ServletJsonMustache</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>ServletJsonMustache</name>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
</properties>
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
</configuration>
</plugin>
</plugins>
</build>
</project>
这是 Maven POM 文件。我们有两个工件：用于 servlet 的 javax.servlet-api 和用于 Java JSON 处理的 gson。
context.xml
<?xml version="1.0" encoding="UTF-8"?> <Context path="/ServletJsonMustache"/>
在 Tomcat context.xml 文件中，我们定义了上下文路径。它是 Web 应用程序的名称。
City.java
package com.zetcode.bean;
public class City {
private Long id;
private String name;
private int population;
public City() {
}
public City(Long id, String name, int population) {
this.id = id;
this.name = name;
this.population = population;
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getPopulation() {
return population;
}
public void setPopulation(int population) {
this.population = population;
}
@Override
public String toString() {
return "City{" + "id=" + id + ", name=" + name +
", population=" + population + '}';
}
}
这是 City bean。它具有三个属性：id、name 和 population。
GetCities.java
package com.zetcode.web;
import com.google.gson.Gson;
import com.zetcode.bean.City;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(name = "GetCities", urlPatterns = {"/GetCities"})
public class GetCities extends HttpServlet {
private static final List<City> cities;
static {
cities = new ArrayList<>();
cities.add(new City(1L, "Bratislava", 432000));
cities.add(new City(2L, "Budapest", 1759000));
cities.add(new City(3L, "Prague", 1280000));
cities.add(new City(4L, "Warsaw", 1748000));
cities.add(new City(5L, "Los Angeles", 3971000));
cities.add(new City(6L, "New York", 8550000));
cities.add(new City(7L, "Edinburgh", 464000));
cities.add(new City(8L, "Berlin", 3671000));
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("application/json;charset=UTF-8");
try (ServletOutputStream os = response.getOutputStream()) {
os.print(new Gson().toJson(cities));
}
}
}
这是 GetCities servlet。
response.setContentType("application/json;charset=UTF-8");
响应对象的内容类型设置为 application/json。
try (ServletOutputStream os = response.getOutputStream()) {
os.print(new Gson().toJson(cities));
}
我们使用 Gson 库将 Java 列表转换为 JSON 数组。该数组被写入响应输出流。该阵列未被赋予名称。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cities</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
</head>
<body>
<script id="mp_template" type="text/template">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{{#.}}
<tr>
<td>{{id}}</td>
<td>{{name}}</td>
<td>{{population}}</td>
</tr>
{{/.}}
</tbody>
</table>
</script>
<div id="mypanel"></div>
<button id="btn">Load</button>
<script>
$(function () {
$("#btn").on('click', function () {
$.getJSON('http://localhost:8084/ServletJsonMustache/GetCities', function (cities) {
var template = $("#mp_template").html();
var text = Mustache.render(template, cities);
$("#mypanel").html(text);
});
});
});
</script>
</body>
</html>
这是主页。
<script id="mp_template" type="text/template"> ... </script>
Mustache 模板位于
<tbody>
{{#.}}
<tr>
<td>{{id}}</td>
<td>{{name}}</td>
<td>{{population}}</td>
</tr>
{{/.}}
</tbody>
使用 {{#.}} {{/.}} 语法，我们遍历从 servlet 返回的未命名 JSON 数组，并用值替换 Mustache 标签。
$.getJSON('http://localhost:8084/ServletJsonMustache/GetCities', function (cities) {
我们使用 $.getJSON 调用 GetCities servlet。 servlet 返回 JSON 数据，这些数据由 Mustache 处理。
命名 JSON 数组
如果我们想命名返回的 JSON 数组，我们可以使用以下代码：
Gson gson = new GsonBuilder().create();
JsonArray jarray = gson.toJsonTree(cities).getAsJsonArray();
JsonObject jsonObject = new JsonObject();
jsonObject.add("cities", jarray);
os.print(jsonObject.toString());
在 servlet 中，我们将 JSON 数组放入另一个 JSON 对象中，并将属性命名为 cities。
<tbody>
{{#cities}}
<tr>
<td>{{id}}</td>
<td>{{name}}</td>
<td>{{population}}</td>
</tr>
{{/cities}}
</tbody>
在 Mustache 模板中，我们使用以下语法：{{#cities}} {{/cities}}。
在本文中，我们使用了 Mustache 模板引擎。
地址：https://www.cundage.com/article/javascript-mustache.html
相关阅读
Big.js 教程展示了如何使用 Big.js 模块在 JavaScript 中使用任意精度的大十进制算法。 大.js 大.js 是一个小型、快速的 JavaScript 库，用于任意精度的十进...
faker.js 教程展示了如何使用 faker.js 库在 JavaScript 中生成虚假数据。 伪造者.js 伪造者.js 是一个用于生成假数据的 JavaScript 库。构建和测试我们...
Node.js 教程是 Node.js 的入门教程。我们描述了 Node.js 并提供了一些 Node.js 代码示例。 Nojde.js 节点.js 是一个开源、跨平台的 JavaScript...
JavaScript 数组教程展示了如何在 JavaScript 中使用数组。 数组是许多值的集合。数组项称为数组的元素。每个元素都可以通过索引引用。数组是从零开始的。 JavaScript 数...
Liquid.js 教程展示了如何在 JavaScript 应用程序中使用 Liquid 模板引擎。 液体 液体 是一个 JavaScript 模板引擎。它是由 Shopify 创建的。 Liq...
Rollup.js 教程展示了如何使用 Rollup.js 模块打包器。 卷起 是一个 JavaScript 模块打包器。它将较小的代码片段编译成较大的库或应用程序包
Moment.js 教程展示了如何使用 Moment.js 模块在 JavaScript 中处理日期和时间。 时刻.js 时刻.js 是一个轻量级的 JavaScript 日期库，用于解析、验证...
Day.js 教程展示了如何使用 Day.js 模块在 JavaScript 中处理日期和时间。 日.js Day.js 是一个极简主义的 JavaScript 日期库，用于解析、验证、操作和格...
JavaScript JSON.parse 教程展示了如何将 JSON 字符串解析为 JavaScript 对象。 JSON JSON（JavaScript 对象显示法） 是一种轻量级数据交换格...
在本教程中，我们展示了如何在 JavaScript 中创建和使用模块。 模块 是 JavaScript 代码的容器。模块在单独的文件中定义。模块的目的是组织和隔离代码。 JavaScript 多...
热门文章
最新发布：