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 rendered = Mustache.render(template,obj);

两个参数：一个是模板html，一个是数据源对象。

一个返回值：渲染后的html



2，载入模板的几种方式
（1）使用直接字符串作为template

//参数template
var template = '{{title}} spends {{calc}}';

//参数obj
var obj = {
    title: "Joe",
    calc: function () {
        return 2 + 4;
    }
}

//mustache渲染
var rendered = Mustache.render(template,obj);

//将返回的内容添加到页面
$('#target').html(rendered);

总结：
模板渲染两个基本素材：template, obj。前者和后者都可以简单，也可以复杂
Mustache替换：var result = Mustache.render(template, obj);
渲染到页面：$("xxID").html(result);


（2）使用页面内script块作为template

//拿到template
var template = $('#template').html();

//预解析（可选步骤）
Mustache.parse(template); // optional, speeds up future uses

//渲染
var rendered = Mustache.render(template, {name: "Luke"});

//将渲染后的内容，添加到页面
$('#target').html(rendered);

（3）异步获取内容作为template

a, 使用$.get()方式获取

var obj = {};
$.get('template.mst', function(template){
    var result = Mustache.render(template, obj);
    $("xxID").html(result);
});

b, 在模块化项目中，还可以使用var tpl = require("path/to/xx.tpl");将模板加载到当前页面。然后再用如下方式：

//头部require文件
var Backbone = require('backbone'),
        Mustache = require('mustache'),
        tpl      = require('crownCommonKeyPreviewTpl');

        //具体在某个方法中使用
        var tpl_type = "crownCommonKeyPreview-Pc";
        if(device == 2){
        	tpl_type = "crownCommonKeyPreview-Mobile";
        }
        var html = "",
        	tplArr = $(tpl);
        for(var i=0; i<tplArr.length; i++){
        	var template = tplArr[i];
        	if($(template).html() && ($(template).attr("id") == tpl_type)){
        		html = Mustache.render($(template).html(), obj);
        	}
        }
        return html;

批注：在模块化项目中，require非常强大，相当于直接把模板文件载入到当前页面，由于模板文件中的格式是：
<script id="xx1" type="text/html">...</script>
<script id="xx2" type="text/html">...</script>
...
<script id="xxn" type="text/html">...</script>
所以使用$(tpl)后就是一个jQuery的模板对象数组了（array like）。
然后通过循环可以依次取出每一个模板，并通过$(item).attr("id")取出ID来做比较。

另外，对于空格换行（多行）jQuery也认为是一个TextNode，所以需要使用$(item).html()是否为空过滤掉。


批注：有一个坑是试图通过如下方式获取：
$(tpl).find("#crownCommonKeyPreview-Pc");
问题在于$(tpl)是一个jQuery对象数组，不是选择器。



总结：template有三种来源：
（1）直接字符串
（2）本页面中带ID的script
（3）异步获取





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


如果您觉得本文的内容对您的学习有所帮助，您可以微信：