一、初识Mustache
同样也是看Dropwizard才知道这个东西的,以前一直是知道诸如freemarker这样的模板引擎,这个是头一次听说,但是听周围的朋友说最早这个东西是出自于JS的,Dropwizard推荐使用这个东西,而且到mustache官网看了一下,发现十几种语言已经支持这个模板引擎技术,火热程度甚至超过了freemarker,看来到了不得不学的地步了, 先来看看mustache是什么意思,我们都有一个不好的缺点,就是每次看到一个新鲜的东西就想知道他的中文名字叫什么,那么mustache的中文意思是什么?一定头疼?,它的英文是“胡子”,“胡须”的意思,好了不纠结这些东西了,我们先来了解一下mustache的基本知识,以及如何使用吧。
二、如何使用Mustache
2.1、名字
mustache官方给出的是Logic-less templates.翻译过来就是逻辑很少的模板,到底是不是呢?我们在学习的过程中慢慢去体会吧.
2.2、语法概述
2.2.1、一个比较典型的mustache模板如下所示
Hello {
{name}}
You have just won {
{value}} dollars!
{
{#in_ca}}
Well, {
{taxed_value}} dollars, after taxes.
{
{/in_ca}}
2.2.2、给出的条件如下所示:
{
"name": "wangwenjun",
"value": 10000,
"taxed_value": 10000 - (10000 * 0.4),
"in_ca": true
}
2.2.3、那么得到的结果又会是怎样的呢?
<span style="background-color: rgb(0, 0, 0);"><span style="color:#006600;">Hello wangwenjun
You have just won 10000 dollars!
Well, 6000.0 dollars, after taxes.</span></span>
2.2.4、简单说明
2.3、Mustache的Tag类型详细介绍
Tag本地两对花括号标示出来,例如{
{person}},当然{
{#person}}也是一个Tag,这两个简单的例子中,我们使用了person作为tag的关键字,至于两种写法的区别在哪里,我们接下来慢慢的讨论。
2.3.1、变量
标签最主要的作用就是当作一个变量来使用,{ {name}}标签在模板中会尝试查找name这个关键字在当前的上下文中,如果上下文中不存在name,父上下文将会通过递归的方式去查找,如果最顶级的上下文中依然找不到,name标签将不会被渲染,否则name标签会被替换渲染。
所有的变量在HTML中将会被过滤掉,如果你想返回没有经过转义的HTML元素,你可以使用三个花括号{ { {name}}}.
当然你也可以使用&告诉上下文不要进行转义,如:{ {&name}},这种方式非常有用,可以在下文中的设置分隔符中看到它的进一步用法,好了看一个简单的例子吧
mustache模板:
* {
{name}}
* {
{age}}
* {
{company}}
* {
{
{company}}}
Hash 上下文:
{
"name": "Chris",
"company": "<b>GitHub</b>"
}
输出:
* Chris
*
* <b>GitHub</b>
* <b>GitHub</b>
我们一起分析一下模板的输出过程,其中第一个标签被替换为Chris,第二个标签中在整个上下文中不存在,因此不作渲染,第三个我们说过了会被转义,因为有html元素,最后一个如果你想保留html元素就使用三个花括号的形式,这样会被完整的输出。
2.3.2、块
{ {#person}}同样也是一个标签,但是他的作用是块的意思,如果写成{ {person}}那么就是一个变量,像前文所说的那样,在本节中,我们来学习一下块的用法,也就是标签的第二个类型
所谓块就是渲染一个区域的文本一次或者多次,当然需要依赖当前上下文中person所代表的内容