Mustache 入门教程

Mustache 简介：

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

Mustache 语法：

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

• {{keyName}}
• {{#keyName}} {{/keyName}}
• {{^keyName}} {{/keyName}}
• {{.}}
• {{
• {{{keyName}}}
• {{!comments}}

传统

传统的写后台ajax过来的数据我们会 ：

$.each(messages.reverse(), function(index, message) {
    $('#messageList').append(
        '
' +
        message.userName + '' +
        '' +
        '
' + message.messageText + '
');
    }
});

不停的进行字符串的拼接，那么使用mustache后，我们可以 :

mustache 使用

{{keyName}}

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

var tpl = '{{company}}';
var html = Mustache.render(tpl, data);
//输出：
Apple

{{#keyName}}{{/keyName}}

var tpl = '{{#stooges}} 
hello {{name}}
 {{/stooges}}';
var html = Mustache.render(tpl, data);
//输出：
 hello Moe 
 hello Larry 
 hello Curly 

注意：如果{{#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 键名就会渲染这段

{{{keyName}}}

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

var tpl = '{{#address}} 
{{{street}}}
 {{/address}}'
//输出：
1 Infinite Loop Cupertino

{{!comments}}

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

{{!这里是注释}}
//输出：