mustache的标签使用
mustache的标签使用
漫天的沙 发表于2年前
mustache的标签使用
  • 发表于 2年前
  • 阅读 107
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: 介绍常用的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}}&nbsp;&nbsp;{{/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}}&nbsp;&nbsp;{{/userList}}<br />
布尔值:{{#boolean}}布尔值内的内容{{/boolean}}<br />
null的测试:{{#testNull}}null内的消息{{/testNull}}<br />
空字符串的测试:{{#emptyString}}这是空字符串的内容{{/emptyString}}<br /><br />

循环遍历:{{^userList}}age:{{age}},name:{{name}},address:{{address}}&nbsp;&nbsp;{{/userList}}<br />
布尔值:{{^boolean}}布尔值内的内容{{/boolean}}<br />
null的测试:{{^testNull}}null内的消息{{/testNull}}<br />
空字符串的测试:{{^emptyString}}这是空字符串的内容{{/emptyString}}<br />

</body>
</html>

运行结果如下:


代码下载:本章例子下载


上一篇:mustache的国际化支持

下一篇:mustache的标签使用(进阶)

共有 人打赏支持
粉丝 11
博文 21
码字总数 18549
×
漫天的沙
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: