文档章节

mustache.js (hogan.js) API中文版

wobuzhidao_
 wobuzhidao_
发布于 2014/03/05 13:01
字数 1428
阅读 8469
收藏 3

翻译API文档,如有疏漏,还望读者不吝赐教。

英文原文地址

##名称

mustache - Logic-less模板.

##概要

典型Mustache模板示例:

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

hash:

    {
      "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 可用于HTML,配置文件,源代码等,通过扩展标签(Tags)来渲染模板,标签的值一般是hash或者js对象。

之所以称为"logic-less",是因为它既没有if-else,也没有for循环,Mustache只有标签。一些标签会被值来替换,有些不会,还有些会被系列的值替换。本文主要介绍不同类型的Mustache标签。

##TAG类型

标签(Tags) 使用{{ }}来描述. {{person}}是一个标签, {{#person}}也是标签. 在上面两个示例中,我们将person作为key值或者标签key,下面我们来看看不同类型的tag。

##变量 变量是最基本的Tag类型,模板中的{{name}} 标签会尝试在上下文中寻找名称键值,如果没有找到,则不进行渲染。

所有的变量默认都进行了HTML转义,如果你想返回未转义的HTML,请使用三个花括号{{{name}}}

另外你也可以使用&来跳过转义:{{& name}},当改变分隔符的时候,这种方式比较有用。(见设置分隔符部分)。

默认情况下,变量缺失会返回一个空字符串。这通常由你所使用的Mustache库设置决定,但是Ruby版本的Mustache则会引发一个异常。例如:

模板:

* {{name}}
* {{age}}
* {{company}}
* {{{company}}}

hash:

{
  "name": "Chris",
  "company": "<b>GitHub</b>"
}

输出:

* Chris
*
* &lt;b&gt;GitHub&lt;/b&gt;
* <b>GitHub</b>

##块「Sections」 一次或者多次渲染大段的文本使用,这依赖于上下文的键值。

使用#起始,以/结束。即{{#person}}表示person块起始,而{{/person}}表示结束。的表现由键值来决定。

###假值以及空列表 如果person键存在假值或者空列表,在#/之间的HTML则不会显示。

模板:

Shown.
{{#nothin}}
  Never shown!
{{/nothin}}

Hash:

{
  "person": true
}

输出:

Shown.

###非空列表 如果person键存在,并且值为真,在#/之间的HTML则会被渲染,并且进行一次或者多次渲染。

当值为非空列表时,列表中的文本则会被遍历展示。段落的内容则会被赋予到当前的列表项的for each迭代器。通过这种方式,我们可以遍历集合。

When the value is a non-empty list, the text in the block will be displayed once for each item in the list. The context of the block will be set to the current item for each iteration. In this way we can loop over collections.

模板:

{{#repo}}
  <b>{{name}}</b>
{{/repo}}

Hash:

{
  "repo": [
    { "name": "resque" },
    { "name": "hub" },
    { "name": "rip" }
  ]
}

输出:

<b>resque</b>
<b>hub</b>
<b>rip</b>

###Lambdas表达式 当值是可调用的对象,例如function或者lambda,那么对象会被调用并且跳过文本。 被跳过的文字不进行渲染。{{tags}}讲不会被展开——由lambda自身来决定。通过这种方式,可以实现过滤器以及缓存。

When the value is a callable object, such as a function or lambda, the object will be invoked and passed the block of text. The text passed is the literal block, unrendered. {{tags}} will not have been expanded - the lambda should do that on its own. In this way you can implement filters or caching.

模板:

{{#wrapped}}
  {{name}} is awesome.
{{/wrapped}}

Hash:

{
  "name": "Willy",
  "wrapped": function() {
    return function(text, render) {
      return "<b>" + render(text) + "</b>"
    }
  }
}

输出:

<b>Willy is awesome.</b>

###真值

当值为真但不是一个列表的时候,渲染一次。

模板:

{{#person?}}
  Hi {{name}}!
{{/person?}}

Hash:

{
  "person?": { "name": "Jon" }
}

输出:

Hi Jon!

##反向块「Inverted Sections」 反向块由^起始,/结束。即{{^person}} 表示person开始一个反向块,而{{/person}}结束。

While sections can be used to render text one or more times based on the value of the key, inverted sections may render text once based on the inverse value of the key. That is, they will be rendered if the key doesn't exist, is false, or is an empty list.

Template:

{{#repo}}
  <b>{{name}}</b>
{{/repo}}
{{^repo}}
  No repos :(
{{/repo}}

Hash:

{
  "repo": []
}

Output:

No repos :(

##注释 注释由一个!开始,如下面的模板所示:

<h1>Today{{! ignore me }}.</h1>

将会被渲染成下面的HTML:

<h1>Today.</h1>

注释支持换行.

##Partials

Partials由一个>开始,如{{> box}}.

Partials 仅在运行时(同编译时相反)被渲染,所以(模板)支持循环的Partials,但要避免支持死循环。

Partials 可以继承调用上下文calling context,在 ERB 中,你可能有如下代码:

<%= partial :next_more, :start => start, :size => size %>

Mustache 仅需要如下:

{{> next_more}}

为什么?因为next_more.mustache文件将会从调用上下文中继承size 和 start 方法

通过这种方式,你可以将partials看作includes,或者模板的扩展,尽管这可能不一定是正确。

例如, 如下的模板和partial:

base.mustache:

<h2>Names</h2>
{{#names}}
  {{> user}}
{{/names}}

user.mustache:

<strong>{{name}}</strong>

可以被看出一个文件,扩展的模板:

<h2>Names</h2>
{{#names}}
  <strong>{{name}}</strong>
{{/names}}

设置分隔符

设置分隔符采用 = 开始,可以将原始的{{}}修改为自定义的字符

考虑如下的人造示例:

* {{default_tags}}
{{=<% %>=}}
* <% erb_style_tags %>
<%={{ }}=%>
* {{ default_tags_again }}

Here we have a list with three items. 下面我们分别解释三个例子: 第一个使用了默认的分隔标记,第二个通过设置分隔符使用erb style ,第三个通过设置分隔符声明又继续使用默认的分隔符标记

According to ctemplates, this "is useful for languages like TeX, where {{ may occur in the text and are awkward to use for markup."

自定义分隔符不能包含空格或者等号。

版权 Mustache is Copyright (C) 2009 Chris Wanstrath

Original CTemplate by Google

© 著作权归作者所有

共有 人打赏支持
wobuzhidao_
粉丝 1
博文 4
码字总数 2287
作品 0
南京
程序员
mustache.js

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

匿名
2012/03/16
9.9K
0
JavaScript 超轻量级框架--Nuclear

Nuclear 是腾讯 AlloyTeam 团队开发的一款形似 React 的超轻量级框架(大小16k,gzip后6k)。 纯粹的javascript Nuclear不需要jsx,你只需要使用纯粹的javascript就可以使用面向对象的方式去编...

叶秀兰
2015/06/08
11.2K
14
模板引擎编译程序--Temper

Temper 是极小的模板编译模块,通过单个实例,支持服务端和客户端使用。Temper 非常容易创建同构的 JavaScript 应用。 支持以下模板引擎: react-jsx jade ejs hogan.js mustache handlebar...

叶秀兰
2015/05/08
227
0
tempistry

tempistry 是超轻量级的序列化 JavaScript 模板和先后呈现逻辑注册。 安装: npm install tempistry 使用 temper 来编译,所以支持以下渲染引擎: jade ejs hogan.js mustache handlebars 服...

叶秀兰
2015/05/08
93
0
终成正果 Sun完整发布Java API文档中文版

2005年10月31日在Sun 中国技术社区正式发布第一批中文版Java API文档(包括java.lang和java.util类库API 文档的中文版)。经过将近10个月的努力,目前Sun 中国技术社区已经将Java SE 5.0的全...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java日期和时间获取问题

获取年月日时分秒 Calendar cal = Calendar.getInstance();//获取年int year = cal.get(Calendar.YEAR);//获取月,范围是0-11,最后使用需+1int month = cal.get(Cal...

lanyu96
26分钟前
7
0
Ceph学习笔记2-在Kolla-Ansible中使用Ceph后端存储

环境说明 使用Kolla-Ansible请参考《使用Kolla-Ansible在CentOS 7单节点上部署OpenStack Pike》; 部署Ceph服务请参考《Ceph学习笔记1-Mimic版本多节点部署》。 配置Ceph 以osdev用户登录: ...

LastRitter
30分钟前
6
0
OSChina 周二乱弹 —— 老司机表示右手无处安放

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @花间小酌 :分享李宗盛的单曲《鬼迷心窍》--春风再美也比不上你的笑 《鬼迷心窍》 - 李宗盛 手机党少年们想听歌,请使劲儿戳(这里) 每天早...

小小编辑
42分钟前
225
5
复习2

10月22日任务 awk 中使用外部shell变量 awk 合并一个文件 把一个文件多行连接成一行 awk中gsub函数的使用 awk 截取指定多个域为一行 过滤两个或多个关键词 用awk生成以下结构文件 awk用print...

hhpuppy
50分钟前
5
0
原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
今天
62
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部