文档章节

mustache的标签使用(进阶)

漫天的沙
 漫天的沙
发布于 2015/06/16 21:58
字数 978
阅读 87
收藏 0
点赞 0
评论 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
博文 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

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

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

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

皇上洗碗 ⋅ 2016/10/18 ⋅ 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java序列化和反序列化

1、什么是序列化和反序列化 序列化:把对象转换为字节序列的过程。 反序列化:把字节序列恢复成对象的过程。 2、被序列化的类需要实现serializable接口,只是为了标注该对象是可以被序列化的...

IT-Mamba ⋅ 4分钟前 ⋅ 0

流式构建原理

流式构建需要达到分钟级的数据更新频率,Kylin采用类似于Spark Streaming的做法,每隔数分钟进行一次微构建。这边的构建需要考虑到一个延迟因素,分布式网络存在延迟等因素,该时间段的数据有...

无精疯 ⋅ 4分钟前 ⋅ 0

在maven项目工程编写solr代码,需要的依赖

solrJ <dependency> <groupId>org.apache.solr</groupId> <artifactId>solr-solrj</artifactId> <version>6.6.2</version> </dependency> <dependency> <groupId>org.apache.httpcomponents<......

爱运动的小乌龟 ⋅ 11分钟前 ⋅ 0

Spring Cloud Config

Spring Cloud Config application.yml 和 bootstrap.yml 区别 加载顺序 bootstrap.yml 先加载 application.yml 后加载 bootstrap.yml 用于应用程序上下文的引导阶段。 bootstrap.yml 由父 Sp...

施长成 ⋅ 21分钟前 ⋅ 0

MapReduce V2——YARN调度

一、MapReduce的局限性 1、JobTracker的单点问题 2、TaskTracker的作业信息分配的过于简单,当有资源消耗较大的或者时间较长的Task分配在同一个节点上的时候,容易失败或者等待时间过长 3、作...

cjxcloud ⋅ 22分钟前 ⋅ 0

EOS踩坑--脆弱的数据库

安装EOS我就不在这赘述了,来唠唠EOS踩到的坑,跟着官方文档走,然后到了同步数据的时候,Ctrl+Z结束了之后,再次运行报错 root@ubuntu:~# nodeos -e -p eosio --plugin eosio::chain_api_pl...

开源首席鉴黄师 ⋅ 22分钟前 ⋅ 0

对于程序员的招聘问题,作为软件人的一些吐槽和建议

作为软件人,找工作有时候似乎挺苦逼的。 说真的,让我去掉前面这句中“似乎”二字吧。就是苦逼!很多人都曾抱怨处在招聘的一方很糟糕——我们没有任何可靠的方式来甄别会写代码并且写得好的...

老道士 ⋅ 38分钟前 ⋅ 0

Linux下MySQL表名不区分大小写的设置方法(抄袭别人的)

Linux下MySQL表名不区分大小写的设置方法 MySQL表名不区分大小写的设置方法 在用centox安装mysql后,把项目的数据库移植了过去,发现一些表的数据查不到,排查了一下问题,最后发现是表名的大...

随风而浮沉 ⋅ 47分钟前 ⋅ 0

ubuntu下安装宋体simsun

sudo cp simsun.ttc /usr/share/fonts cd /usr/share/fonts sudo chmod 644 simsun.ttc 更新字体缓存: 代码: sudo mkfontscale 代码: sudo mkfontdir 代码: sudo fc-cache -fsv 安装chrome扩......

wangxuwei ⋅ 48分钟前 ⋅ 0

利用 ssh 传输文件

Linux 下一般可以用 scp 命令通过 ssh 传送文件: #把服务器上的 /home/user/a.txt 发送到本机的 /var/www/local_dir 目录下scp username@servername:/home/user/a.txt /var/www/local_dir...

大灰狼时间 ⋅ 58分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部