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 ,可以得到如下的结果:

222600_KEMW_2373894.png

说明对于设置的对象,确实调用了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>

结果如下:

223539_xVyh_2373894.png

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>

运行结果:224654_eV0T_2373894.png

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>

运行结果如下:

225134_Kz8B_2373894.png


代码下载:本章例子下载


上一篇:mustache的国际化支持

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

转载于:https://my.oschina.net/zzq350623/blog/467108

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值