js模板引擎mustache介绍及实例

在Javascript中 mustache.js是实现mustache模板系统。

Mustache是一种没有逻辑的模板语法。它可以应用于HTML、配置文件、源代码等任何地方。 它通过使用散列或对象中提供的值在模板中展开标记来工作。

我们称它为没有逻辑的模板，是因为它没有if语句、else子句和for循环，它只有标签。一些标签被替换为值或什么也没有或者一系列的值。

• 不能在模板中使用else if做逻辑判断，我们可以在数据传入之前对数据做逻辑操作。

我们在那使用mustache.js

你可以在任何可以使用JavaScript的地方使用mustache.js来渲染mustache模板。包括web浏览器、服务器环境（node）。

语法

• 模板以包裹住内容，格式中写入的是模板的内容。 被替换的内容字段使用双花括号包裹起来"{{}}"
• 插值表达式：双花括号{{}} 包裹替换的字段
• {{#prop-name}}{{/prop-name}}用作for循环渲染，当prop-name的值为非空数组时，mustach不会遍历该数组，渲染出个数和该数组长度相等的DOM元素
• 也可以用作if-else判断。{{#prop-name}}{{/prop-name}}和{{^{prop-name}}{{/prop-name}}两组标签结合使用，当prop-name的值存在且不为false时，会渲染{{#prop-name}}{{/prop-name}}的内容，否则渲染{{}prop-name}}{{/prop-name}}的内容。

我们注意到上面代码render的第二个参数都是一个对象，第二个参数我们通常都会使用对象类型，传入一个对象，在模板中书写对象属性，可以渲染出对象的值。 但也可以是其它类型如 数组、字符串类型、数字，如下:

我们可以看到如果第二个参数是其它类型，那么在模板中双花括号内就用点.来表示，使用起来不方便。 一般在项目中很少会传入其它类型。

对象属性值为数组时 实现forEach遍历数组渲染DOM

//页面部分
Loading
//模板

//js部分

用作if-else,属性无论是显示还是隐式转换为boolean类型，true时渲染{{#prop-name}} false时渲染{{^prop-name}}

//页面部分
Loading
//模板

//js部分

实际使用

用一个唯一id的script标签包裹模板内容，type类型为text/template

使用原生javascript方法或者jquery方法获得唯一id的script标签的html内容

var template = document.getElementById('template').innerHTML.trim();
//或
var template = $("#template").html();

使用mustache的render方法处理模板后填充到目标位置

var rendered = Mustache.render(template,obj);
$('#target').html(rendered)

完整代码如下：

	
	


	
Loading

	
	
	
	

上面示例是内部文件使用mustache模板引擎，我们还可以引入外部模板引擎来渲染页面。

首先我们在HTML文档中引入jquery.mustache.js文件配合mustache使用，jquery.mustache.js是jQuery做了一层封装，提供了集中方法让我们更方便使用mustache做模板渲染。 此处我们使用它的.load方法从指定路径加载模板文件，加载成功后使用$.Mustache.render()处理模板渲染页面。

$.Mustache
	.load('./mustache/demo2.mustache')
	.done(function(){
		$("#target").html($.Mustache.render('demo2',{name:'wan'}))
	})

下面我们来看一个完整的案例

	
	


	
Loading

	
	
	
	

以上~