资讯专栏INFORMATION COLUMN

mustache:web模板引擎

klivitamJ / 1970人阅读

摘要:简介是一个轻逻辑模板解析引擎,它的优势在于可以应用在等多种编程语言中。这里主要是看中的应用。

mustache简介

Mustache 是一个 logic-less (轻逻辑)模板解析引擎,它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。这里主要是看JavaScript中的应用。Javascript 语言的模板引擎,目前流行有 Mustache、Hogan、doT.js、JsRender、Kendo UI Templates等,

Mustache 的模板语法很简单,就那么几个:

{{keyName}}
{{#keyName}} {{/keyName}}
{{^keyName}} {{/keyName}}
{{.}}
{{

下面看看mustache.js的使用,github地址: https://github.com/janl/musta...

使用方法

这里看看快速使用:

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

var output = Mustache.render("

{{title}} spends {{calc}}

", view);

这个直观的认识就是:写一段字符串,可以是和html文档一样的字符串模板,然后按照mustache的书写规则将需要处理的数据对象通过渲染方法注入,形成一个需要的html文本,就可以是使用innerHTML或者$.html之类的方法放到页面中。

变量

mustache的模板就是一段字符串,里面编写了任意多的mustache tags,都是使用 {{key}} 来进行占位,如果渲染数据没有对应的数据就会渲染为空,需要注意的是{{}}这样书写是不会html转译的,渲染数据里面书写的html标签会被转化为实体,可以使用{{{}}}或者{{&name}},如果不想{{}}被mustache解析渲染的话可以使用 {{=<% %>=}} {{key}} <%={{ }}=%> 将忽略出包起来。

View:

{
  "name": "Chris",
  "company": "GitHub"
}
Template:

* {{name}}      //* Chris
* {{age}}       //* 
* {{company}}   //* GitHub
* {{{company}}}  //* GitHub
* {{&company}}  //* GitHub
{{=<% %>=}}
* {{company}}  //* {{company}}
<%={{ }}=%>

JavaScript"s dot notation may be used to access keys that are properties of objects in a view.

View:

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

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

* Michael Jackson
* RIP
区块

区块内的部分可能会被渲染一次或者多次,根据模板中的具体展示,区块同样是使用两个tag标志起始和结束,{{#key}} {{/key}}
If the person key does not exist, or exists and has a value of null, undefined, false, 0, or NaN, or is an empty string or an empty list, the block will not be rendered.
也就是说如果如果块区的值对应的是null、undefined、false、0、NaN、空字符串、空数组,这个块区是不会渲染的,如果是数组就会如下:

View:

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

{{#stooges}}      //Moe
{{name}}   //Larry
{{/stooges}}      //Curly

如果块区是要展示一个字符串数组,可以考虑使用{{.}}来完成循环渲染,

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

块区甚至可以直接使用function来进行数据的处理

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

Template:
{{#beatles}}
* {{name}}
{{/beatles}}

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

还有块区的key直接就是function的时候,这个看起来好高级,我也没太明白,一般不会这么写吧。

If the value of a section key is a function, it is called with the section"s literal block of text, un-rendered, as its first argument. The second argument is a special rendering function that uses the current view as its view argument. It is called in the context of the current view object.

View:

{
  "name": "Tater",
  "bold": function () {
    return function (text, render) {
      return "" + render(text) + "";
    }
  }
}
Template:

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

Hi Tater.
反转块区

这个和块区更像是一个组合,对应 if else这种情况,块区实在key有内容的时候来进行渲染,反转块区恰恰相反,在没有内容的时候来进行渲染,这也很符合web开发的情景,

View:

{
  "repos": []
}
Template:

{{#repos}}{{name}}{{/repos}}
{{^repos}}No repos :({{/repos}}
Output:

No repos :(
其他 注释、子模块

Comments begin with a bang and are ignored. The following template:

Today{{! ignore me }}.


Will render as follows:

Today.


{{!comment}} 这就是注释了

子模块就是当渲染的数据比较的复杂的时候就可以考虑使用分割来进行部分一快一块的渲染,{{> block}}
这里需要注意渲染调用的方法和之前不一样了,需要最后带上block这个区块的渲染内容

For example, this template and partial:

base.mustache:

Names

{{#names}} {{> user}} {{/names}} user.mustache: {{name}} Can be thought of as a single, expanded template:

Names

{{#names}} {{name}} {{/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.render(template, view, { user: userTemplate });

参考:https://github.com/janl/musta...
http://www.iinterest.net/2012...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83030.html

相关文章

  • 10个最好的 JavaScript 模板引擎

    摘要:是一个有着完善和惊艳特性的模板引擎。是一个强大的客户端模板引擎,用来将数据绑定到页面的结构中。一套同时可用于浏览器或的异步模板引擎。是一套富功能的模板引擎。本文链接个最好的模板引擎来源编译含内容扩充责任沙渺 JavaScript随着各种神奇的实用功能库日渐丰富,而越来越受到Web开发者与设计师的追捧,例如:jQuery, MooTools, Prototype等。 使用JavaScr...

    Stardustsky 评论0 收藏0
  • js模版引擎介绍

    摘要:使用方法编译模板并根据所给的数据立即渲染出结果仅编译模版暂不渲染,它会返回一个可重用的编译后的函数根据给定的数据,对之前编译好的模板进行数据渲染参考资料模板引擎概述 js模版引擎介绍 JavaScript 模板是将 HTML 结构从包含它们的内容中分离的方法。模板系统通常会引入一些新语法,但通常是非常简单的,一个要注意的有趣的点是,替换标记通常是由双花括号({ {……} })表示,这也...

    duan199226 评论0 收藏0
  • 字符串与JavaScript之间的魔术—前端模板的原理及简单实现

    摘要:大多数模板实现原理基本一致模板字符串首先通过各种手段剥离出普通字符串和模板语法字符串生成抽象语法树然后针对模板语法片段进行编译,期间模板变量均去引擎输入的变量中查找模板语法片段生成出普通片段,与原始普通字符串进行拼接输出。 前端模板的发展 模板可以说是前端开发最常接触的工具之一。将页面固定不变的内容抽出成模板,服务端返回的动态数据装填到模板中预留的坑位,最后组装成完整的页面html字符...

    Steve_Wang_ 评论0 收藏0
  • Omi原理-Hello Omi

    摘要:注意,这里目前没有引入,不管第几次渲染都是无脑设置,复杂结构对浏览器的开销很大,这里后续会引入。整合这里把给直接暴露在下,因为每个组件都生成了唯一的,后续实现事件作用域以及对象实例获取都要通过下的获取。 Hello Omi Omi框架的每个组件都继承自Omi.Component,本篇会去完成Omi的Component的基本锥形,让其能够渲染第一个组件。 omi.js实现 var Omi...

    王岩威 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<