前端模板 mustache

最近因工做須要接觸到 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項目主頁 傳送門最後.本人非專業前端,若有錯誤 還望指正