最近因工作需要接触到 mustache.

起首什么是mustache呢

Mustache 模板语法的逻辑比较简朴。它用于HTML，配置文件，源代码等。它的工作体式格局是经由过程经由过程以哈希值或许对象的体式格局扩大模板标签。

github 项目地点

mustache.js

mustache简朴运用

1.简朴的变量换取：{{name}} 示例以下 :

var data = { "name": "Willy" };
Mustache.render（"{{name}} is awesome."，data）; //Willy is awesome.

2.如果变量含有html的代码的，比方：<br>、<tr>等等而不想转义能够在用{{&name}} 示例以下 :

var data = {"name" : "<br>Willy<br>"};
var output = Mustache.render（"{{&name}} is awesome."， data); //<br>Willy<br> is awesome. 

PS : 去掉”&”的效果是转义为：<br>Willy<br> is awesome.

3.mustache 和 PHP 连系运用

在没运用mustache之前,运用ajax猎取到数据以后,是经由过程 拼接html代码来完成的,也许以下 :

var $tpl = $('<div><li class='name'></li></div>');
$tpl.find('.name').text('XXX'); 

引入mustache以后 代码以下 :

<script src="mustache.js"></script>
<script id="myTemplate" type="text/html">  //声明一个模板
  <div class="cc">
      <div class="name">{{name}}</div>
  </div>
</script>

<script>
    $(function(){
        $.getJSON('mustache.php',function(json){  //猎取数据 衬着到页面
            for (var i in json) {
                var tpl = Mustache.render($('#myTemplate').html(), json[i]);
                $('.show').append(tpl);
            }
        })

        $(document).on('click','.name',function(){ //对增加的元素绑定事宜
            console.log($(this).text());
        })  
    })
</script>
    //PHP代码

    $arr = array(
            array('id'=>1,'name'=>'小茗同砚'),
            array('id'=>1,'name'=>'小莉同砚')
        );

    exit(json_encode($arr));

末端

关于mustache 另有很对其他的运用方法,作者在github也给出细致的示例.

github项目主页 传送门
末了.本人非专业前端,若有毛病 还望斧正