javascript模板引擎Mustache

Mustache（英文本意：触须，胡须）是基于JavaScript实现的模版引擎，类似于JQuery Template，但是这个模版更加的轻量级，语法更加的简单易用，很容易上手。

mustache主要特点是logic less Templates 意思说，模版中无逻辑或者说很少逻辑。

A mustache template is a string that contains any number of mustache tags. Tags are indicated by the double mustaches that surround them. {{person}} is a tag, as is {{#person}}. In both examples we refer to person as the tag's key. There are several types of tags available in mustache.js, described below.

There are several techniques that can be used to load templates and hand them to mustache.js, here are two of them:

Include Templates

If you need a template for a dynamic part in a static website, you can consider including the template in the static HTML file to avoid loading templates separately. Here's a small example using jQuery:

<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);

}

Load External Templates

If your templates reside in individual files, you can load them asynchronously and render them when they arrive. Another example using jQuery:

function loadUser() {

  $.get('template.mst', function(template) {

    var rendered = Mustache.render(template, {name: "Luke"});

    $('#target').html(rendered);

  });

}

简单的对象绑定：

$(function () {

            var user = { name: "Olive", age: 23, sex: "girl" };

            var template = "My name is  {{name}} ,I'm  {{age}} ,Sex is {{sex}}";

            var view = Mustache.render(template, user);

            $("#user_info").html(view);

l 页面呈现效果：

javascript模板引擎Mustache

l 语法解释：

i. Mustache的语法很简单，用两个大括号标记要绑定的字段即可，“{{}}”；

ii. 大括号内的字段名称要和Mustache.render方法中的第二个参数中的对象的属性名一致

iii. 主要的渲染方法为Mustache.render，该方法有两个参数，第一个为要渲染的模版，也就是上例中的template，第二个就是数据源也就是上例中的user对象

.如果是对象，还能解释其属性

var data = {

            "name" : {

                "first" : "Chen",

                "last" : "Jackson"

            },

            "age" : 18

        };

        var output = Mustache.render(

                "name:{{name.first}} {{name.last}},age:{{age}}", data);

        console.log(output);

结果：name:Chen Jackson,age:18

对象数组循环渲染展示

 var users = { result: [{ name: "Only", age: 24, sex: "boy" },

                                   { name: "for", age: 24, sex: "boy" },

                                   { name: "Olive", age: 23, sex: "girl" }

                                   ]

            };

            var template = "<div><table cellpadding=0 cellspacing=0 class='tb' ><tr><td>Name</td><td>Age</td><td>Sex</td></tr>{{#result}}<tr><td>{{name}}</td><td>{{age}}</td><td>{{sex}}</td></tr>{{/result}}</table><div>";

            var views = Mustache.render(template, users);

            $("#users_info").html(views);

页面呈现效果：

javascript模板引擎Mustache

l 语法解释：

i. 对于对象数据Mustache也有其特殊的语法：{{#}}{{/}}，如果所给定的数据源是一个对象数组，则可以使用该语法，很方便的用来循环展示。

ii. 其中{{#}}标记表示从该标记以后的内容全部都要循环展示

iii. {{/}}标记表示循环结束。这种情况多用于table行的展示。

上边我们有讲到{{#}}{{/}}这样的语法，除了上边的循环遍历之外，它还有另外的一层意思就是判空，如果{{#}}中的值为null或false或undefine则其标记内的内容则不展现、

迭代

var data = {

            "stooges" : [ {

                "name" : "Moe"

            }, {

                "name" : "Larry"

            }, {

                "name" : "Curly"

            } ]

        };

        var output = Mustache.render("{{#stooges}}<b>{{name}}</b>{{/stooges}}",

                data);

        console.log(output);

输出：Moe

Larry

Curly

如果迭代的是数组，还可以用{{.}}来替代每个元素

 var data = {

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

3         };

4         var output = Mustache.render("{{#musketeers}}* {{&.}}{{/musketeers}}",

5                 data);

6         console.log(output);

输出：* Athos

* Aramis

* Porthos

* D'Artagnan

迭代输出的还可以是一个function返回的结果，function可以读取当前变量的上下文来获取其他属性执行其他操作

输出： *John Lennon

*Paul McCartney

*George Harrison

*Ringo Starr

8：方法里面可以再执行变量中的表达式

var data = {

            "name" : "{{age}}" + "Tater",

            "bold" : function() {

                return function(text, render) {

                    console.log(text);

                    return "<b>" + render(text) + "</b>";

                };

            },

            "age" : 18

        };

        var output = Mustache.render("{{#bold}}Hi {{name}}.{{/bold}}", data);

        console.log(output);

输出结果：

Hi {{age}}Tater.

Hi 18Tater.

9.{{^}}与{{#}}相反，如果变量是null、undefined、 false、和空数组讲输出结果

10.{{! }}注释

完整使用：

https://github.com/janl/mustache.js

一篇文章：

Web 模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，通常是标准的 HTML 文档。当然不同的开发语言有不同模板引擎，如 Javascript 下的 Hogan 、ASP 下的 aspTemplate、以及 PHP 下的 Smarty，这里主要介绍基于 Javascript 语言的模板引擎，目前流行有 Mustache、Hogan、doT.js、JsRender、Kendo UI Templates等，jsperf.com 上可以看到它们的性能对比，首先先介绍下 Mustache。

一、Mustache 简介：

Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。

二、Mustache 语法：

Mustache 的模板语法很简单，就那么几个：

{{keyName}}
{{#keyName}} {{/keyName}}
{{^keyName}} {{/keyName}}
{{.}}
{{<partials}}
{{{keyName}}}
{{!comments}}

这里将以 javascript 应用为例进行介绍，先来看个 Demo：

...

<script type="text/javascript" src="mustache.js"></script>

<script type="text/javascript">

var data = {

    "company": "Apple",

    "address": {

        "street": "1 Infinite Loop Cupertino</br>",

        "city": "California ",

        "state": "CA ",

        "zip": "95014 "

    },

    "product": ["Macbook ","iPhone ","iPod ","iPad "]

}

var tpl = '<h1>Hello {{company}}</h1>';

var html = Mustache.render(tpl, data);

console.log( html )

</script>

...

//运行后 Console 输出：

<h1>Hello Apple</h1>

在 Demo 中可以看到 data 是数据，tpl 是定义的模板，Mustache.render(tpl, data)方法是用于渲染输出最终的 HTML 代码。

借助 Demo 来对语法做简单的介绍：

{{keyName}}
{{}}就是 Mustache 的标示符，花括号里的 keyName 表示键名，这句的作用是直接输出与键名匹配的键值，例如：

var tpl = '{{company}}';

var html = Mustache.render(tpl, data);

//输出：

Apple

{{#keyName}} {{/keyName}}
以#开始、以/结束表示区块，它会根据当前上下文中的键值来对区块进行一次或多次渲染，例如改写下 Demo 中的 tpl：

var tpl = '{{#address}} <p>{{street}},{{city}},{{state}}</p> {{/address}}';

var html = Mustache.render(tpl, data);

//输出：

<p>1 Infinite Loop Cupertino&lt;/br&gt;,California,CA</p>

注意：如果{{#keyName}} {{/keyName}}中的 keyName 值为 null, undefined, false；则不渲染输出任何内容。

{{^keyName}} {{/keyName}}
该语法与{{#keyName}} {{/keyName}}类似，不同在于它是当 keyName 值为 null, undefined, false 时才渲染输出该区块内容。

var tpl = {{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}};

var html = Mustache.render(tpl, data);

//输出：

没找到 nothing 键名就会渲染这段

{{.}}
{{.}}表示枚举，可以循环输出整个数组，例如：

var tpl = '{{#product}} <p>{{.}}</p> {{/product}}';

var html = Mustache.render(tpl, data);

//输出：

<p>Macbook iPhone iPod iPad</p>

{{>partials}}
以>开始表示子模块，如{{> address}}；当结构比较复杂时，我们可以使用该语法将复杂的结构拆分成几个小的子模块，例如：

var tpl = "<h1>{{company}}</h1> <ul>{{>address}}</ul>"

var partials = {address: "{{#address}}<li>{{street}}</li><li>{{city}}</li><li>{{state}}</li><li>{{zip}}</li>{{/address}}"}

var html = Mustache.render(tpl, data, partials);

//输出：

<h1>Apple</h1>

<ul><li>1 Infinite Loop Cupertino&lt;/br&gt;</li><li>California</li><li>CA</li><li>95014</li></ul>

{{{keyName}}}
{{keyName}}输出会将等特殊字符转译，如果想保持内容原样输出可以使用{{{}}}，例如：

var tpl = '{{#address}} <p>{{{street}}}</p> {{/address}}'

//输出：

<p>1 Infinite Loop Cupertino</br></p>

{{!comments}}
!表示注释，注释后不会渲染输出任何内容。

{{!这里是注释}}

//输出：

参考文章：
http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mustache-js/
http://mustache.github.com/mustache.5.html
http://ued.xinyou.com/2012/07/mustache_5_document.html

参考：

http://blog.csdn.net/xuemoyao/article/details/17896203

http://www.cnblogs.com/flypig88/archive/2012/05/14/2497780.html

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

探究Javascript模板引擎mustache&period;js使用方法
这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...
Javascript模板引擎mustache&period;js详解
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...
模板引擎mustache&period;js
Javascript模板引擎mustache.js详解阅读目录 1. 从一个简单真实的需求讲起 2. mustache的用法 3. mustache的思想 4. {{prop}}标签 5. {{ ...
推荐13款javascript模板引擎
javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...
各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
JavaScript模板引擎实例应用
在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...
如何选择Javascript模板引擎（javascript template engine)？
译者 jjfat 日期:2012-9-17 来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: ...
【JavsScript】推荐五款流行的JavaScript模板引擎
摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...
Juicer javascript 模板引擎
模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. js模板引擎包括如下:template官方参考:http://au ...

随机推荐

thinkphp发邮件失败原因
使用phpmailer出现连接失败, 代码是别人已经封装好的没有问题,可能原因有如下. qq提示: SMTP server error: mail from address must be same ...
EF &ndash&semi; 6&period;一对一关联
5.6.6 <一对一关联概述> 5.6.7 <一对一关联CRUD演示> 在两讲视频中,首先介绍了数据库中一对一关联表的设计规范,接着通过实例介绍了如何合适Entity Fr ...
在ubuntu上面安装phpmyadmin后，报404错误
安装完mysql后,我想装一个phpmyadmin方便mysql管理. 在终端执行命令:sudo apt-get install libapache2-mod-auth-mysql phpmyadmi ...
poj 2932 Coneology（扫描线+set）
Coneology Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 3574 Accepted: 680 Descript ...
GridView专栏
鉴于GridView的强大,鄙人突然心血来潮,想把GridView单独拿出来整理一下. (一)gridview如何加自增长列 protected void GridView1_RowDataBound ...
微信小程序 - app&period;json配置解析
{ "pages": [ "pages/index/index", "pages/logs/logs", "pages/login ...
20165315 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1
20165315 2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 一.安装过程 1.基本配置创建一个新的自定义vm 选择创建自定虚拟机操作系统选择&quot ...
Yii Restful api认证
原生js--HTTP进度事件
1.HTTP进度事件属于XHR2规范定义的系列事件 2.事件模型中会触发不同的事件,所以不再需要检查readyState事件 3.当调用send()时,触发loadstart事件 4.当正在加载服务器 ...
Qt初学——我的第一个UI
第一次打开Qt的时候,我是一脸懵逼的.没学过c++,里面的程序都看不懂.按照套路,我开始看教程,上手实践.连着搞了3天之后,我开始渐渐明白怎么写UI. 我现在的理解是:UI = 界面设计 + 信号槽响 ...