文档章节

mustache的标签使用(进阶)

漫天的沙
 漫天的沙
发布于 2015/06/16 21:58
字数 978
阅读 90
收藏 0

本章将对mustache中更特别的几个标签进行说明。

1、{{.}}

该标签主要是用于枚举,枚举的对象可以是基本类型数组,也可以是引用类型数组。如果是基本数据类型数组,则直接输出,如果是引用类型的数组,则输出的时候调用该对象的toString方法。该标签需要与{{#xxx}}{{/xxx}}配合使用。如下例子:

@RequestMapping("/extend.mu")
	public String extend(Model model){
		List<Integer> list = Arrays.asList(1,2,3,4);
		model.addAttribute("list", list);
		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);
		
		return "extend";
	}

extend.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Page</title>
</head>
<body>
基本类型数组枚举:{{#list}}{{.}}{{/list}} <br />
对象类型数组枚举:{{#userList}}{{.}}{{/userList}} <br />
</body>
</html>

运行结果如下:

2、{{>子模块的路径}}

{{>xxx}}是将子模块的内容依赖进来,如下:

@RequestMapping("/extend.mu")
	public String extend(Model model){
		List<Integer> list = Arrays.asList(1,2,3,4);
		model.addAttribute("list", list);
		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("testName", "子模板的测试名称");
		
		return "extend";
	}

extend.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Page</title>
</head>
<body>
基本类型数组枚举:{{#list}}{{.}}{{/list}} <br />
对象类型数组枚举:{{#userList}}{{.}}{{/userList}} <br />
======================================子模板的内容开始=======================
{{>partials}}
======================================子模板的内容结束=======================
</body>
</html>

被包含的partials.html:

<br />这个是子模版<br />
子模板的测试名称:{{testName}}<br />
{{#userList}}
	{{name}}&nbsp;&nbsp;&nbsp;
{{/userList}}
<br />

运行结果如下:

此处的引用{{>partials}}中,partials可以是相对路径,也可以是绝对路径。下面对该说法做个测试进行验证:

extend.html中引用partials.html和partials2.html,其中partials2.html与extends.html不在同个目录,层级结构如下:

extend.html内容如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Page</title>
</head>
<body>
基本类型数组枚举:{{#list}}{{.}}{{/list}} <br />
对象类型数组枚举:{{#userList}}{{.}}{{/userList}} <br />
======================================在同个目录的子模板的内容开始(相对目录引用)=======================
{{>partials}}
======================================在同个目录的子模板的内容结束=====================================
<br /><br /><br />
======================================不在同个目录子模板的内容开始(相对目录引用)=======================
{{>test/partials2}}
======================================不在同个目录子模板的内容结束======================================
<br /><br /><br />
======================================不在同个目录子模板的内容开始(绝对目录引用)=======================
{{>/WEB-INF/views/test/partials2}}
======================================不在同个目录子模板的内容结束======================================
</body>
</html>

partials.html不变,新增的partials2.html内容如下:

<br />
这个是第二个子模块,不在同个目录下
<br />
测试名称:{{testName}}<br />

最后的运行结果如下:

3、{{<xxx}}{{/xxx}}

{{<xxx}}{{/xxx}}也为子模板引入,不同于{{>}},该标签需要闭合,并且可以对子模板内的内容进行修改。通过{{$xxx}}{{/}}来设定变量,并将子模板的内容进行替换。为演示效果,重新创建个extend2.html,partials3.html进行演示,如下:

MyController.java新增方法:

@RequestMapping("/extend2.mu")
	public String extend2(Model model){
		return "extend2";
	}

extend2.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Page</title>
</head>
<body>
这个是父模板<br />
{{<partials2}}{{$testString}}这个是父模板的值,要将子模板的内容替换掉{{/testString}}{{/partials2}}
</body>
</html>

partials2.html:

<br />这个是子模版<br />
testString:{{$testString}}这是测试的字符串,渲染的时候会被父模板传的值替换掉{{/testString}}<br />
afdsfsdfsd:{{$afdsfsdfsd}}这个是因为没传值,所以采用当前的值当作默认值{{/afdsfsdfsd}}

运行结果如下:

运行结果说明,子模板的内容被父模板的值替换了。相当于是在子模板中定义了一个变量,父模板没更新的话直接显示子模板的值,如果父模板重新设置了,以父模板的值为准。

另外,本文的完整例子下载地址:mustache标签的使用(进阶)


上一篇:mustache的标签使用

© 著作权归作者所有

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

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

wobuzhidao_
2014/03/05
0
0
mustache.js

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

匿名
2012/03/16
9.9K
0
Vue2.0笔记——{{}}模板与自定义过滤器

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

逝岁月
04/15
0
0
Vue.js笔记,从入门到精通

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

皇上洗碗
2016/10/18
163
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
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

高三暑假我是怎么想开去学linux系统的

高三的时候,我有一句口头禅:“老了老了,现在做题越来越迟钝了”。当时整天日夜苦读,体重日益增加,脸色越来越黯淡,我在终于熬过了高考的时候,简直心里面乐得开了花。我终于可以去做自己...

linuxprobe16
9分钟前
0
0
Python 获得命令行参数的方法

需要模块:sys 参数个数:len(sys.argv) 脚本名: sys.argv[0] 参数1: sys.argv[1] 参数2: sys.argv[2]

编程老陆
16分钟前
0
0
链队

队列用链表来表示时,需要用两个变量来记录队列两端的变化:theFront,theBack. 根据链接方向的不同,链队有两种链接方式(其实就是链表的头插入节点和尾插入节点,头删除节点和尾删除节点)。...

Frost729
20分钟前
0
0
IDEA toString() json模板

public java.lang.String toString() {java.lang.StringBuilder builder = new java.lang.StringBuilder();#set ($i = 0)#foreach ($member in $members)#if ($i == 0)builder.appen......

Mtok
30分钟前
0
0
Dubbo内核实现之SPI简单介绍

Dubbo采用微内核+插件体系,使得设计优雅,扩展性强。那所谓的微内核+插件体系是如何实现的呢!即我们定义了服务接口标准,让厂商去实现(如果不了解spi的请谷歌百度下), jdk通过ServiceLo...

明理萝
34分钟前
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部