Mustache是一个Logic-Less模板引擎,即:零逻辑引擎,原因在于它只有标签,没有流程控制语句,这是它与其它模板引擎不同的地方。

Mustache小巧玲珑,几乎用各种语言都实现了一遍。

Mustache的用途

不仅仅用于HTML页面渲染,也可以用于配置文件、XML渲染等各种文本文件。

第一个例子

一个典型的mustache文件如下:

Hello {{name}}
You have just won {{value}} dollars!
{{#in_ca}}
Well, {{taxed_value}} dollars, after taxes.
{{/in_ca}}

给定一个哈希表:

{
"name": "Chris",
"value": 10000,
"taxed_value": 10000 - (10000 * 0.4),
"in_ca": true
}

将会产生如下结果:

Hello Chris
You have just won 10000 dollars!
Well, 6000.0 dollars, after taxes.

Mustache只有5种标签,就是这么简单

变量标签

{{username}}

默认情况下,username中的<等符号会被转义为&lt;

防止转义使用{{&username}}或者使用{{{username}}}

区块标签

{{#sectionVariable}}

这里是区块

{{/sectionVariable}}

区块变量可以取四种数据类型:

1、 false或者空数组:不显示区块内容

2、 非空数组:表示迭代数组中的每一项

Template:

{{#repo}}
<b>{{name}}</b>
{{/repo}}
Hash: {
"repo": [
{ "name": "resque" },
{ "name": "hub" },
{ "name": "rip" }
]
}
Output: <b>resque</b>
<b>hub</b>
<b>rip</b>

如果区块直接是一个字符串列表

View:

{
"musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"]
}
Template: {{#musketeers}}
* {{.}}
{{/musketeers}} 结果:
* Athos
* Aramis
* Porthos
* D'Artagnan

3、函数:调用一次函数

Template:

{{#wrapped}}
{{name}} is awesome.
{{/wrapped}}
Hash: {
"name": "Willy",
"wrapped": function() {
return function(text, render) {
return "<b>" + render(text) + "</b>"
}
}
}
Output: <b>Willy is awesome.</b>

4、字典类型:控制上下文

Template:

{{#person?}}
Hi {{name}}!
{{/person?}}
Hash: {
"person?": { "name": "Jon" }
}
Output: Hi Jon!

反转区块标签:用于实现else结构

Template:

{{#repo}}
<b>{{name}}</b>
{{/repo}}
{{^repo}}
No repos :(
{{/repo}}
Hash: {
"repo": []
}
Output: No repos :(

注释标签

{{!这里随便写点注释}}

包含标签

{{>head.mustache}}

Mustache的包含是动态包含,而不是简单地复制粘贴。

我所知道的其它模板引擎

java模板引擎

freemarker

velocity

beetl

smarty4j

httl

各种语言:

mustuche

参考资料

官方文档

Python版

Java版

Mustache模板引擎的更多相关文章

  1. JS模板引擎-Mustache模板引擎使用实例1-表格树

    1 使用实例代码 1.jsp代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title> ...

  2. nodejs+Express中使用mustache模板引擎

    由于公司一个seo项目,需要我协助.此项目他人已经开发大半,由于seo需要,使用了服务器端模板引擎.我项目的后端同事说项目是go语音写的,跑项目麻烦,只给了我template和css等静态文件. 为了 ...

  3. 前端数据渲染及mustache模板引擎的简单实现

    早期数据渲染的几种方式 在模板引擎没有诞生之前,为了用JS把数据渲染到页面上,诞生了一系列数据渲染的方式. 最最基础的,莫过于直接使用DOM接口创建所有节点. <div id="roo ...

  4. swift 之 mustache模板引擎

    用法: Variable Tags {{name}} 用来渲染值name datas: let data = ["value": "test"] ------- ...

  5. js模板引擎mustache介绍及实例

    在Javascript中 mustache.js是实现mustache模板系统. Mustache是一种没有逻辑的模板语法.它可以应用于HTML.配置文件.源代码等任何地方. 它通过使用散列或对象中提 ...

  6. 【转】在Express项目中使用Handlebars模板引擎

    原文:http://fraserxu.me/2013/09/12/Using-Handlebarsjs-with-Expressjs/ 最近在用Expressjs做一个项目,前后端都用它来完成.自己之 ...

  7. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  8. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  9. Mustache.js前端模板引擎源码解读

    mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...

随机推荐

  1. Redis五大数据结构

    1.Redis介绍 Redis是REmote DIctionary Server的缩写,作者定位于一个内存KV存储数据库(In-memory key-value Store),让Redis自豪的并不是 ...

  2. Git 学习(八)其他

    Git 学习(八)其他 通过以上七章Git的学习,基本操作已差不多了,本章介绍一点落网之鱼:  包括如何忽略文件.配置别名.以及使用GitHub等. 当然,Git的强大远不是七章内容可概括的,之后可结 ...

  3. 上下变换中 aspect的选择

    在电视制作还没有完全整转到高清之前,有很多原来的SD素材需要转到HD信号进入高清切换或者编辑平台,电视台是电视节目的发射源端 ,所以上变换过程不能引入额外的噪声或者失真: 上变换使用的方式一般有4种: ...

  4. Multi-label && Multi-label classification

    Multi-label classification with Keras In today’s blog post you learned how to perform multi-label cl ...

  5. Android数据解析-JSON解析

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,基于JavaScript(Standard ECMA-262 3rd Edition - December ...

  6. Minimum Depth of Binary Tree leetcode java

    题目: Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the ...

  7. N-Queens II leetcode java

    题目: Follow up for N-Queens problem. Now, instead outputting board configurations, return the total n ...

  8. leetcode 二分查找 Search in Rotated Sorted ArrayII

    Search in Rotated Sorted Array II Total Accepted: 18500 Total Submissions: 59945My Submissions Follo ...

  9. rsync同步数据---把左边的文件全部拷贝到右边

    背景,配置好了ssh 使用rsa pulbic key的方式登陆远程服务器.//ssh-keygen -t rsa -b 2048 -f andy-rsync-key -P '' https://he ...

  10. AutoPlay Menu Builder入门教程

    1 拖动窗口可以设置主界面的窗口大小,在下面有版面预览 2 常用东西介绍.右侧的素材库除了按钮还有图像,背景,音乐等.使用按钮的时候选中需要的按钮样式,双击即可上屏.图形按钮即使可以使用图像作为背景的 ...