假装异步加载中...
08 Mar 2015

Mustache 基础

Mustache 是 Logic-less templates。它与语言无关。许多编程语言都有 Mustache 的实现。例如:

概要

一个典型的 Mustache 模板:

Hello 
You have just won  dollars!

Well,  dollars, after taxes.

如果给定下面的 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,配置文件,源代码–等任何文件中。它的工作方法是:用以 hash 或者 object 形式提供的值展开模板里的 tags。

说它 logic-less 是因为它没有 if else 语句,也没有 for 循环。它只有 tags。tag 可以被一个值替换,也可以是一系列值。

Tag 类型

Tag 用双大括号标明。是一个 tag, 也是一个 tag。下面的例子中,我们把 person 叫做 key 或者 tag key。

Mustache 定义了 6 种 tag 类型,包括:

  • Variables
  • Sections
  • Inverted Section
  • Comments
  • Partials
  • Set Delimiter:用于变更定界符

Variables

最基本的 tag 就是 variable。模板里的一个 `` tag 会尝试在当前 context 中寻找 name key。如果没找到,则递归的从父级 context 中查找。如果一直到顶层 context,都没找到 name key。那么就不会渲染。

默认所有的 variable 都会进行 HTML 转义。如果你想返回未转义的HTML,使用 }

你还可以使用 & 来避免转义一个 variable:``。这在改变定界符时很有用。

默认情况下,一个 variable “miss” 会返回一个空字符串。通常这可以在你的 Mustache 库中进行配置。例如:Ruby 版的 Mustache 支持在这种情况下抛出一个错误。

模板:

* 
* 
* 
* }

hash:

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

输出:

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

Sections

sections 会根据当前 context 中 key 的值渲染文本块一次或多次。

一个 section 以 # 开始,/ 结束。例如:开始一个 "person" section ,而 结束它。我们把开始 tag 和结束 tag 之间的文本叫做 section’s “block”(后面叫做文本块)。

section 的行为取决于 key 的值。key 的值有下面几种情况:

  • False Values or Empty Lists
  • Non-Empty Lists
  • Lambdas
  • Non-False Values

False Values or Empty Lists

如果 person key 存在,值为 false 或者是一个 empty list,#/ 之间的 HTML 不会被显示出来。

模板:

Shown.

  Never shown!

Hash:

{
  "person": false
}

输出:

Shown.

Non-Empty Lists

如果 person key 存在,并且值为 non-false。#/ 之间的 HTML 会被渲染一次或多次。

如果值为非空列表,列表里的每一个 item 都会渲染一次文本块。 每次 iteration,文本块的 context 会被设置为当前的 item。我们可以用这种方式循环列表。

模板:

  <b></b>

hash:

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

输出:

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

Lambdas

如果值为 callable object,例如:函数或者 lambda。object 会被调用,同时文本块会作为参数传进去。文本块以 literal block 形式传进去,还未渲染。即 tag 还未展开,lambda 需要自己做这件事。可以据此来实现 filters 或者 caching

模板:

   is awesome.

hash:

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

输出:

<b>Willy is awesome.</b>

Non-False Values

如果值为 non-false,但不是 list,它会用作 context 渲染一次文本块。

模板:

  Hi !

hash:

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

输出:

Hi Jon!

Inverted Section

一个 inverted section 以 ^ 开始,以 / 结束。sections 用来根据 key 的值渲染文本块一次或者多次,inverted sections 根据 key 的 inverse value 渲染文本一次。也就是说,如果 key 不存在或者是 false,或者是空 list,才会被渲染。

模板:

  <b></b>


  No repos :(

hash:

{
  "repo": []
}

输出:

No repos :(

Comments

注释以感叹号开始,并且不会被渲染。例如:

<h1>Today.</h1>

会出输出:

<h1>Today.</h1>

注释可以包含新行。

Partials

partials以 > 开始,例如:``。

partials 在运行时渲染(和编译时相对),所以递归的 partials 是有可能的。只是要避免无限循环。

partials 会继承 calling context。在一个 ERB 文件中,你可能需要这样:

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

但是用 Mustache,你只需:

为什么?因为 next.mustache 文件会从 calling context 继承 size 和 start method。

Set Delimiter

set delimiter tag 以 = 开始,将定界符从 `` 修改为自定义的字符串。

例如:

* 

* <% erb_style_tags %>
<%==%>
* 

自定义的定界符不能包含等号和空格

参考资料:

发现文章有错误或是有疑问,欢迎骚扰:395217502@qq.com
上一篇: CasperJS 日志
上一篇: Mustache.js 基础
comments powered by Disqus