mustache

最新推荐文章于 2024-05-09 09:45:36 发布

张侦毅

最新推荐文章于 2024-05-09 09:45:36 发布

阅读量1w

点赞数 1

分类专栏： javascript 文章标签： mustache 前端模版

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

mustache

官网链接

mustache

部分代码示例

mustache

使用

下面是如何快速开始使用mustache.js:

var view = {
  title: "Joe",
  calc: function () {
    return 2 + 4;
  }
};

var output = Mustache.render("{{title}} spends {{calc}}", view);

在这个例子中，这个Mustache.render函数包含了两个参数：1）mustache模版和 2）一个包含模版渲染所需数据和代码的视图容器对象。

API

下面是一些最常用函数的签名

Mustache.render(
  template  : String,
  view      : Object,
  partials? : Object,
) => String

Mustache.parse(
  template              : String,
  tags = ['{{', '}}']   : Tags,
) => String

interface Tags [String, String]

模版

mustache模版是一个包含一些mustache标签成员的字符串，标签是由环绕在它们周围的双重{{}}所指示的。{{person}} 就是一个标签，作为一个 {{#person}}。在这两个例子中，我们倾向于将person视为标签的主键。在mustache.js中我们有一些可用的标签，如下面的描述。

我们有几种技术可以用来加载模板并将它们交给mustache.js，请看下面的两个例子。

包含模版

如果你需要一个静态网站动态部分的模板，您可以考虑在静态HTML文件中包含模板，以避免分别加载模板。下面是一个使用jQuery的小示例:

<!DOCTYPE HTML>
<html>
<body onload="loadUser()">
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Hello {{ name }}!
</script>
</body>
</html>

function loadUser() {
  var template = $('#template').html();
  Mustache.parse(template);   // optional, speeds up future uses
  var rendered = Mustache.render(template, {name: "Luke"});
  $('#target').html(rendered);
}

加载额外的模版

如果您的模板位于单独的文件中，那么您可以异步加载它们，并在它们到达时呈现它们。另一个例子使用jQuery:

function loadUser() {
  $.get('template.mst', function(template) {
    var rendered = Mustache.render(template, {name: "Luke"});
    $('#target').html(rendered);
  });
}

变量

最基本的标记类型是一个简单的变量。一个 {{name}}标签呈现name的值到当前的上下文中。如果这里不存在这个主键，什么都不会被呈现。

默认情况下，所有变量都是html转义的。如果您想要呈现未转义的HTML，请使用三重mustache:{{{name}}}。您还可以使用&来转义一个变量。

如果您希望{{name}}不被解释为mustache标签，而是要在输出中准确地显示{{name}}，则必须更改并恢复默认的分隔符。有关更多信息，请参阅自定义分隔符部分。

视图:

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

模版:

* {{name}}
* {{age}}
* {{company}}
* {{{company}}}
* {{&company}}
{{=<% %>=}}
* {{company}}
<%={{ }}=%>

输出:

* Chris
*
* &lt;b&gt;GitHub&lt;/b&gt;
* <b>GitHub</b>
* <b>GitHub</b>
* {{company}}

JavaScript的点表示法可以用于访问视图中对象属性的主键。

视图：

{
  "name": {
    "first": "Michael",
    "last": "Jackson"
  },
  "age": "RIP"
}

模版：

* {{name.first}} {{name.last}}
* {{age}}

输出：

* Michael Jackson
* RIP

分段

根据当前上下文中的键值，分段呈现一个或多个文本块。

一节以#开始，以/结束。也就是说，{{#person}}开始了一个person的部分，而 {{/person}} 结束了它。两个标记之间的文本被称为“块”。

这个部分的行为取决于键的值。

否定值或者空的列表

如果person键不存在，或者存在并且具有null、未定义、false、0或NaN的值，或者是空字符串或空列表，那么该代码块将不会被呈现。

视图：

{
  "person": false
}

模版：

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

输出：

Shown.

非空列表

如果person键存在且不为空、未定义或false，且不是空列表，那么该块将被呈现一次或多次。

当值为list时，该块将为列表中的每个项呈现一次。块的上下文被设置为每个迭代的列表中的当前项。这样我们就可以对集合进行循环。

视图：

{
  "stooges": [
    { "name": "Moe" },
    { "name": "Larry" },
    { "name": "Curly" }
  ]
}

模版：

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

输出：

<b>Moe</b>
<b>Larry</b>
<b>Curly</b>

当循环遍历一系列字符串时，一个.可用于引用列表中的当前项。

视图：

{
  "musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"]
}

模版：

{{#musketeers}}
* {{.}}
{{/musketeers}}

输出：

* Athos
* Aramis
* Porthos
* D'Artagnan

如果一个分段变量的值是一个函数，在每次迭代的列表中，它将被调用在当前条目的上下文中。

视图：

{
  "beatles": [
    { "firstName": "John", "lastName": "Lennon" },
    { "firstName": "Paul", "lastName": "McCartney" },
    { "firstName": "George", "lastName": "Harrison" },
    { "firstName": "Ringo", "lastName": "Starr" }
  ],
  "name": function () {
    return this.firstName + " " + this.lastName;
  }
}

模版：

{{#beatles}}
* {{name}}
{{/beatles}}

输出：

* John Lennon
* Paul McCartney
* George Harrison
* Ringo Starr

函数

如果一个分段键的值是一个函数，那么它就会被称为分段文本的文本块，而非呈现，这是它的第一个参数。第二个参数是一个特殊的呈现函数，它使用当前视图作为它的视图参数。它在当前视图对象的上下文中被调用。

视图：

{
  "name": "Tater",
  "bold": function () {
    return function (text, render) {
      return "<b>" + render(text) + "</b>";
    }
  }
}

模版：

{{#bold}}Hi {{name}}.{{/bold}}

输出：

<b>Hi Tater.</b>

反转分段

一个反转的分段开始于 {{^section}}而不是{{#section}}。只有当该部分的标记值为null、未定义、false、falsy或空列表时，才会显示反转分段。

视图：

{
  "repos": []
}

模版：

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

输出：

No repos :(

备注

备注从!开始，然后输入的内容将会被忽略。以下模板:

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

将呈现如下：

<h1>Today.</h1>

备注可能包含换行。

Partials（部分）

部分从大于符号开始，比如 {{> box}}。

部分是在运行时(而不是编译时)呈现的，所以递归部分是可能的。避免无限循环。

它们还继承了调用上下文。而在ERB中你可能会有这样的

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

Mustache 只需要如下：

{{> next_more}}

为什么?因为接下来更多的。mustache 文件将继承大小并从调用上下文开始变量。通过这种方式，您可能会想要将分区看作包含、导入、模板扩展、嵌套模板或子模板，尽管这里并不是真正的例子。

例如，这个模板和部分:

base.mustache:
<h2>Names</h2>
{{#names}}
  {{> user}}
{{/names}}

user.mustache:
<strong>{{name}}</strong>

可以被看作是一个单一的，扩展的模板:

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

In mustache.js an object of partials may be passed as the third argument to Mustache.render. The object should be keyed by the name of the partial, and its value should be the partial text.

在mustache.js中，一个对象可以作为第三个参数传递给Mustache.render。这个对象应该以部分的名称为键，它的值应该是部分文本。

Mustache.render(template, view, {
  user: userTemplate
});

自定义分隔符

{{和}}可以使用自定义分隔符来代替，并通过在JavaScript或模板中设置新的值。

在JavaScript中设置

Mustache.tags属性包含一个由打开和结束标记值组成的数组。通过将一个新的标记数组传递给parse()来设置自定义值，该数组可以通过默认值获得，或者通过覆盖标记属性本身:

var customTags = [ '<%', '%>' ];

将值传递给解析方法

Mustache.parse(template, customTags);

覆盖标签属性

Mustache.tags = customTags;
// Subsequent parse() and render() calls will use customTags

在模版中设置

设置分隔符标记从一个等号开始，并将标记分隔符从{{和}}转换到自定义字符串。

考虑以下人为的例子:

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

这里我们有一个列表包含三个列表项。第一个列表项使用默认的标记样式，第二个使用ERB样式作为被定义的设置分隔符，第三个则返回到默认样式，在另一个设置分隔符声明之后。

根据模版，这“对于像TeX这样的语言来说是很有用的，在文本中可能会出现双括号，并且在标记中很难看。”

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

预先解析和缓存模板

默认情况下,当mustache.js首先解析一个模板，它在缓存中保存完整解析的令牌树。下一次，当它看到同样的模板时，它会跳过解析步骤，并更快地呈现模板。如果您愿意，您可以提前使用mustache.parse来完成这项工作。

Mustache.parse(template);

// Then, sometime later.
Mustache.render(template, view);

张侦毅

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
mustache

mustache是一种无逻辑的模板语法。它可以用于HTML、配置文件、源代码——任何东西。它可以通过在模板中使用散列或对象提供的值来扩展标记。我们称其为“无逻辑”，因为没有if语句、else子句或for循环。取而代之的是标签。一些标记被替换为一个值，一些没有，另一些则是一系列的值。
复制链接

扫一扫