文档章节

mustache的标签使用

漫天的沙
 漫天的沙
发布于 2015/06/15 22:52
字数 982
阅读 120
收藏 0
点赞 0
评论 0

    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的标签使用(进阶)

© 著作权归作者所有

共有 人打赏支持
漫天的沙
粉丝 10
博文 21
码字总数 18549
作品 0
厦门
高级程序员
mustache.js (hogan.js) API中文版

翻译API文档,如有疏漏,还望读者不吝赐教。 英文原文地址 名称 mustache - Logic-less模板. 概要 典型Mustache模板示例: hash: 输出: 引言 可用于HTML,配置文件,源代码等,通过扩展标签(Ta...

wobuzhidao_ ⋅ 2014/03/05 ⋅ 0

mustache的国际化支持

一、国际化的实现 1、上一章中,我们在sprihg配置文件中配置了国际化信息文件前缀,同时定义了mustache的拦截器,这个实际上就是为了支持国际化。再将配置贴出: <?xml version="1.0" encodi...

漫天的沙 ⋅ 2015/06/14 ⋅ 0

mustache.js

mustache.js 是一个 Mustache 模板系统的 JavaScript 实现。 Mustache 模板语法的逻辑比较简单。它用于HTML,配置文件,源代码等。它的工作方式是通过通过以哈希值或者对象的方式扩展模板标签...

匿名 ⋅ 2012/03/16 ⋅ 0

Vue2.0笔记——{{}}模板与自定义过滤器

模板语法 让我们回到最开始 这是一个HelloWorld,简单的通过模板输出。我们称之为数据绑定,而最常见的就是“Mustache”语法 (双大括号) 。 v-once指令,前面介绍过,一次性绑定,数据改变时...

逝岁月 ⋅ 04/15 ⋅ 0

Vue.js笔记,从入门到精通

Vue.js笔记,从入门到精通 这是我总结的笔记,对今天的学习总结了一半,笔记后面再补上,因为之前会angular,所以学起来很简单。 Vue.js 是一种mvvm模式,与angular的区别是完全没有control...

皇上洗碗 ⋅ 2016/10/18 ⋅ 0

Scala模板引擎--Scalate

Scalate 是一个基于 Scala 2.8 的模板引擎,用于生成文本信息和标签。 Scalate 支持以下模板格式: Mustache which is a Scala dialect of Mustache for logic-less templates which also wo...

匿名 ⋅ 2011/05/25 ⋅ 0

tempalte的使用

微信小程序 Template 模板 WXML提供模板(Template),可以在模板中定义代码片段,然后在不同的地方使用。可以保证格式以及数据的相同。 1-定义模板 使用标签定义模板,并将模板名称命名为t...

嘘别吵_4d1c ⋅ 2017/11/19 ⋅ 0

javascript库之Mustache库使用说明

一、简单示例 代码: 1 function show(t) { 2 $("#content").html(t); 3 } 4 5 var view = { 6 title: 'YZF', 7 cacl: function () { 8 return 6 + 4; 9...

技术小牛人 ⋅ 2017/11/18 ⋅ 0

Skyogo/Super Mustache

Super Mustache 项目介绍 超级模板引擎Super Mustache 延续了Mustache经典的{{}}变量形式 代码比Mustache少90倍 速度比Mustache提升2倍 体积仅有400多b 安装教程 使用...

Skyogo ⋅ 05/06 ⋅ 0

给开发者的 10 款最佳的 JavaScript 模板引擎

随着 Web 开发者和设计者收藏 JavaScript库的数量越来越多,JavaScript 也有大量流行的库:jQuery,MooTools 等等,很多时候大家都会使用 JavaScript模板引擎来开发 JavaScript 应用。以下列...

oschina ⋅ 2014/05/12 ⋅ 32

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 32分钟前 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 2

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部