mustache的标签使用
J2EE开发中，我们会经常将值/对象通过request.setAttributes进行设置，然后前端通过EL表达式取出渲染。采用mustache之后，取值同样简单，下面将逐一对常用的标签进行说明（例子以上一章的为基础继续扩展）。
1、标签{{}}
该标签为直接将值渲染显示，有点像jquery的$.text()方法，如果设置的为对象，则渲染的值为对象地toString方法返回的串。如下，在MyController中新增方法：
@RequestMapping("/tag.mu")
public String tag(Model model){
model.addAttribute("name","漫天的沙");
User user = new User();
user.setAddress("address");
user.setAge(18);
user.setName("漫天的沙");
model.addAttribute("user", user);
return "tag";
}
User对象的代码如下：
package com.zzq.test.model;
import java.io.Serializable;
public class User implements Serializable{
private static final long serialVersionUID = 6549292381414751245L;
private String name;
private int age;
private String address;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
@Override
public String toString() {
return "User[name="+name+",address="+address+",age="+age+"]";
}
}
新增tag.htm：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Page</title>
</head>
<body>
姓名:{{name}}<br />
对象:{{user}}
</body>
</html>
访问http://localhost:8080/my/tag.mu ，可以得到如下的结果：
说明对于设置的对象，确实调用了toString方法。
2、{{{}}}标签
该标签可用于将字符串当作html代码进行渲染，有点类似jquey的$.html()。
修改MyController，如下：
@RequestMapping("/tag.mu")
public String tag(Model model){
model.addAttribute("name","漫天的沙");
User user = new User();
user.setAddress("address");
user.setAge(18);
user.setName("漫天的沙");
model.addAttribute("user", user);
//html代码
model.addAttribute("html", "<input type='text' value='abc' /><span style=\"color:red;\">这个是测试的span</span>");
return "tag";
}
修改tag.htm如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Page</title>
</head>
<body>
姓名:{{name}}<br />
对象:{{user}}<br />
HTML-1:{{html}}<br />
HTML-2:{{{html}}}<br />
</body>
</html>
结果如下：
3、{{#param}}{{/param}}
该标签以{{#}}开始，以{{/}}结束，其中上面的param为变量名。只有param存在并且不为空的时候，才会输出标签中间的内容，有点类似于if(xxx){这是内容体}。该标签日常中用于几种场景，一个为条件的判断，比如true或者false，另一种用于循环遍历，比如分页数据的展示，下面将通过几个例子来进行说明。
修改MyConttroler：
@RequestMapping("/tag.mu")
public String tag(Model model){
model.addAttribute("name","漫天的沙");
User user = new User();
user.setAddress("address");
user.setAge(18);
user.setName("漫天的沙");
model.addAttribute("user", user);
//html代码
model.addAttribute("html", "<input type='text' value='abc' /><span style=\"color:red;\">这个是测试的span</span>");
List<User> userList = new ArrayList<User>();
for(int i=0;i<3;i++){
User u = new User();
u.setAddress("address"+i);
u.setAge(10+i);
u.setName("name"+i);
userList.add(u);
}
model.addAttribute("userList", userList);
model.addAttribute("boolean", true);
model.addAttribute("testNull", null);
model.addAttribute("emptyString", "");
return "tag";
}
tag.htm:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Page</title>
</head>
<body>
姓名:{{name}}<br />
对象:{{user}}<br />
HTML-1:{{html}}<br />
HTML-2:{{{html}}}<br />
循环遍历:{{#userList}}age:{{age}},name:{{name}},address:{{address}} {{/userList}}<br />
布尔值:{{#boolean}}布尔值内的内容{{/boolean}}<br />
null的测试:{{#testNull}}null内的消息{{/testNull}}<br />
空字符串的测试:{{#emptyString}}这是空字符串的内容{{/emptyString}}<br />
</body>
</html>
运行结果:
4、{{^param}}{{/param}}
该标签与上面的标签，在param为null或者空的时候，现实包含的内容。保持上面的MyController不变，将tag.htm进行修改，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Page</title>
</head>
<body>
姓名:{{name}}<br />
对象:{{user}}<br />
HTML-1:{{html}}<br />
HTML-2:{{{html}}}<br />
循环遍历:{{#userList}}age:{{age}},name:{{name}},address:{{address}} {{/userList}}<br />
布尔值:{{#boolean}}布尔值内的内容{{/boolean}}<br />
null的测试:{{#testNull}}null内的消息{{/testNull}}<br />
空字符串的测试:{{#emptyString}}这是空字符串的内容{{/emptyString}}<br /><br />
循环遍历:{{^userList}}age:{{age}},name:{{name}},address:{{address}} {{/userList}}<br />
布尔值:{{^boolean}}布尔值内的内容{{/boolean}}<br />
null的测试:{{^testNull}}null内的消息{{/testNull}}<br />
空字符串的测试:{{^emptyString}}这是空字符串的内容{{/emptyString}}<br />
</body>
</html>
运行结果如下：
代码下载：本章例子下载
上一篇：mustache的国际化支持
下一篇：mustache的标签使用（进阶）