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

为什么使用JS模板引擎？

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

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

 

了解Mastache的语法，有兴趣的可以直接看或者查看官方

{
    {data}}{
    {#data}} {
    {/data}}{
    {^data}} {
    {/data}}{
    {.}}{
    {

 流程有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}}

来控制中间的内容。