mustache.js基本使用（一）

mustache.js基本使用（一）

作者：zccst

模板已是第二次接触，第一次使用模板记得是在十分系统里渲染页面时使用，当时已做到熟练使用，但实际上仍不知道原因。

再次学习模板已不是从0开始，所以还算顺手，但毕竟还只限于使用，今天继续学习，希望这次能够更深入一些。

这次学习的是mustache.js，他的理念是让模板尽量保持简单，甚至连基本的逻辑判断都不需要用。

本文基本要点：

1，基本用法

2，使用模板（写在页面或异步获取）

3，集中变量定义

官方地址：https://github.com/janl/mustache.js

以下是公共文件

<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="mustache.js"></script>
<script type="text/javascript">
$(function(){

...

});

<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
  Hello {{ name }}!
</script>

1，最基础的用法
var template = '{{title}} spends {{calc}}';
    var obj = {
    title: "Joe",
    calc: function () {
        return 2 + 4;
    }
}
var rendered = Mustache.render(template,obj);
$('#target').html(rendered);

2，还可以使用模板
总结：两个基本素材：template, obj。

前者和后者都可以简单，也可以复杂
Mustache替换：var result = Mustache.render(template, obj);
渲染到页面：$("xxID").html(result);

var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, {name: "Luke"});
$('#target').html(rendered);

3，template除了直接赋值和来自页面外，还可以异步获取。

var obj = {};
$.get('template.mst', function(template){
    var result = Mustache.render(template, obj);
    $("xxID").html(result);
});
总结：template有三种来源：
（1）直接字符串
（2）本页面中带ID的script
（3）异步获取

4，几种变量
最基本变量 ：{{ company }}
原样输出变量：{{{ company }}}或{{ &company }}
嵌套用点变量：{{name.first}} {{name.last}}