mustache 是 html 模版（用 js转换）。注意：以下模版中的 \ 只是为了转义！（因为本站用 markdown 书写，而大括号会被处理）

mustache (很疼)？

mustache 号称 无脑 “logic-less” 语法。的确，和 json 本身很象，不搞循环、判断这些语法（其实可以判断，更可以循环）。在前（js）后端(ruby,nodejs,java，我想总比古老的 ftl 好一点吧)都能跑。

mustache 基本上就是为了解决 json 转 html 的效率问题。如果直接在 js 中构造 html 然后 append 慢，不直观（周围都是js代码，html css 显得多孤独啊），不好改。

mustache 的工作模式（前端的话），直接在 html 中写

然后 js 中写

jQuery(function($){
    var template=$('#template-container').html();//拿到模版
    var html= Mustache.to_html(template,skills_json);//模版到html代码
    $('#div-mustache-output').html(html);//html写回去
})    

以后就不用看 js ，而直接在 html 代码中看着 json 写数据了！

demo 效果如下：

谁在用？

meituan 是 yui template

douban 是 jquery.tmpl.js，但 jquery-tmpl 项目已经两年不维护了，：（ 也被扔出了 jquery 官方。（用还是能用地）

其它类似 lib 还有 Handlebars, Dust.js, Haml, Embedded JavaScript

废话少说，学习看看

变量

• {{name}} 输出name变量；
• {{{name}}} 或者 {{&name}} 表示输出不转义的变量。

如

{
  "company": "GitHub"
}

模版：

\{\{company\}\}
\{\{\{company\}\}\}
\{\{&company\}\}

输出：

• {{name.last}} 输出name.last变量；

如

{
    "name":{
        "first":"shuang",
        "last":"guo"
    }
}

模版：

\{\{name.last\}\} \{\{name.first\}\}

输出：

block 块（循环）

{{#person}}…{{/person}} 表示一个块。＃ 开始 / 结束

{{^person}}…{{/person}} 可以理解为 else 部分

如果是数组（不是 key:value 模式）用 . 表示当前元素

如

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

模版：

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

输出：

true false 判断

如果没有，或者等于 null, undefined, false, 0, NaN 都被视为 false

函数

{
  "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\}\}

输出：

函数还可以 function(text,render)

注释

{{! 注释 }} 表示注释。

咦，为什么是 template 标签？

大家以前见到的是

<script type="text/x-template"></script>
<script type="text/x-jquery-tmpl"></script>

因为是 script 所以不渲染，类型不认识，所以不执行。但 W3C 熬不住了，于 2013年5月推出 template 标签草案

以后这玩意就有行业标准啦，为了不让某些笨蛋浏览器渲染出来，请加样式表

template {
    display : none;
}

template 原生玩法

<table id="mytable">
<thead>
<tr>
<td>ID</td>
<td>name</td>
<td>twitter</td>
</tr>
</thead>
<tbody>

<!-- rows to be appended here -->

</tbody>
</table>

<!-- row template -->
<template id="mytablerow">
<tr>
<td class="record"></td>
<td></td>
<td></td>
</tr>
</template>

javascript

// fetch tbody and row template
var    t = document.querySelector("#mytable tbody"),
    row = document.getElementById("mytablerow");

// modify row data
var td = row.getElementsByTagName("td");
td[0].textContent = "1";
td[1].textContent = "SitePoint";
td[2].textContent = "sitepointdotcom";

// clone row and insert into table
t.appendChild(row.content.cloneNode(true));

via http://www.sitepoint.com/html5-template-tag/

mustache jquery fn

注意，这个不是必须。

$.mustache = function (template, view, partials) {
    return Mustache.render(template, view, partials);
  };

  $.fn.mustache = function (view, partials) {
    return $(this).map(function (i, elm) {
      var template = $.trim($(elm).html());
      var output = $.mustache(template, view, partials);
      return $(output).get();
    });
  };

})(jQuery);

更小的 t.js

t.js 这个比 mustache 更小，压缩后 400 字节，：）