代码改变世界

javascript模板引擎Mustache

2014-08-08 22:17  youxin  阅读(1093)  评论(1)  编辑  收藏  举报

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

 下载：https://github.com/janl/mustache.js

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  页面呈现效果：

 

 

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

页面呈现效果：

 

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

输出：<b>Moe</b>

        <b>Larry</b>

        <b>Curly</b>

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

 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.
<b>Hi 18Tater.</b>

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