前端模板 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项目主页 传送门最后.本人非专业前端,若有错误 还望指正