Mastache.js学习笔记（转自小花喵）

简单的记录我使用Mastache的使用。

为什么使用JS模板引擎？

当数据结构复杂，Js的拼接凌乱，难以维护，但是又需要通过ajax加载数据的时候；

而Mastache的上手难度不高，并符合大部分业务。

 

了解Mastache的语法，有兴趣的可以直接看小花喵的介绍或者查看官方Api

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

 流程有3步

1. 编写html模板
2. 预编译
3. 绑定数据，并渲染数据

第一步有两种编写模板

• 直接写在js里面
• 另起一个script元素，type为text/template里写

编写时需要注意数据结构来填写键值。

具体Demo如下

//当前是html模板
{{#data}}
    {{name}}
{{/data}}

 

//获取模板
var x = document.getElementById("x").innerHTML.trim();
//预编译
Mastache.parse(x);
//进行数据渲染
document.getElementById("f").innerHTML(Mustache.render(x, data));

结论： 问题总是不断，如果我们还需要能够根据我们给的值，决定是否渲染某个部分。

那么现在就可以解决这个问题，当然还要提示的就是不仅仅是false会导致不渲染指定部分。

null，空数组，0，空字符串一样有效。语法上面比较简单，就是使用{{#key}} ... {{/key}}

来控制中间的内容。