天天看點
傳回

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}}的内容。 
<script id="template" type="x-tmpl-mustache">
	{{name}}
</script>
<script type="text/javascript">
	var template = $("#template").html();
	//name值為函數傳回值
	var r = Mustache.render(template,{
		name:function(){
			return 'abc'            //abc會替換雙花括号内name
		}
	})
	//name值為字元串
	var r = Mustache.render(template,{name:'wan'})  //字元串wan會替換雙花括号内的name
</script>

我們注意到上面代碼render的第二個參數都是一個對象，第二個參數我們通常都會使用對象類型，傳入一個對象，在模闆中書寫對象屬性，可以渲染出對象的值。 但也可以是其它類型如 數組、字元串類型、數字，如下:

<script id="template" type="x-tmpl-mustache">
	{{.}}
</script>
<script type="text/javascript">
	function loadUser(){
		var template = $("#template").html();
		var r = Mustache.render(template,'wan')         //渲染出wan
		//或
		var r = Mustache.render(template,[1,d,3])       //渲染出1,d,3
		//或    
		var r = Mustache.render(template,1)             //渲染出1
	}
</script>

我們可以看到如果第二個參數是其它類型，那麼在模闆中雙花括号内就用點.來表示，使用起來不友善。 一般在項目中很少會傳入其它類型。

對象屬性值為數組時 實作forEach周遊數組渲染DOM

//頁面部分
<div id="target">Loading</div>
//模闆
<script id="template" type="x-tmpl-mustache">
	<ul>
		{{#list}}
		<li>
			<span>{{name}}</span>
			<span>{{age}}</span>
			<span>{{job}}</span>
		</li>
		{{/list}}
	</ul>
</script>
//js部分
<script type="text/javascript">
	var template = $("#template").html();
	var r = Mustache.render(template,{
		list:[
			{name:'wannianqing',age:18,job:'The Front End'},
			{name:'wangxiaosan',age:19,job:'java'},
			{name:'lixiaosi',age:20,job:'The Front End'},
			{name:'sunxiaowu',age:21,job:'java'}
		]
	})
	$("#target").html(r)
</script>

用作if-else,屬性無論是顯示還是隐式轉換為boolean類型，true時渲染{{#prop-name}} false時渲染{{^prop-name}}

//頁面部分
<div id="target">Loading</div>
//模闆
<script id="template" type="x-tmpl-mustache">
	{{#isShow}}一{{/isShow}}
	{{^isShow}}二{{/isShow}}
</script>
//js部分
<script type="text/javascript">
    var template = $("#template").html();
    
    var r = Mustache.render(template,{isShow:true}); //isShow存在且為布爾值true時，顯示 “一”
    var r = Mustache.render(template,{isShow:false}); //isShow存在且為布爾值true時，顯示 “二”
    var r = Mustache.render(template,{}); //isShow不存在時，顯示 “二”
    var r = Mustache.render(template,{isShow:[]}); //isShow存在，為空數組時，顯示 “二”
    var r = Mustache.render(template,{isShow:undefined}); //isShow存在，為undefined時，顯示 “二”
    var r = Mustache.render(template,{isShow:null}); //isShow存在，為null時，顯示 “二”
    
    $("#target").html(r)
</script>
實際使用

用一個唯一id的script标簽包裹模闆内容，type類型為text/template

<script id="template" type="text/template"></script>

使用原生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)

完整代碼如下：

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body "loadUser()">
	<div id="target">Loading</div>

	<script id="template" type="x-tmpl-mustache">
		Hello {{}}~
		<ul>
			{{#list}}
			<li>{{name}}</li>
			{{/list}}
		</ul>
	</script>
	<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
	<script type="text/javascript" src="js/mustache.js"></script>
	<script type="text/javascript">
		function loadUser(){
			var template = $("#template").html();

			var obj = {
				list:[
					{name:'wan'},
					{name:'wan'},
					{name:'wan'}
				]
			}
			var rendered = Mustache.render(template,obj);
			$('#target').html(rendered)
		}
	</script>
</body>
</html>

上面示例是内部檔案使用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'}))
	})

下面我們來看一個完整的案例

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="target">Loading</div>

	<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
	<script type="text/javascript" src="js/mustache.js"></script>
	<script type="text/javascript" src="js/jquery.mustache.js"></script>
	<script type="text/javascript">
		//要傳入的資料
		var objData = {
			list:[
				{name:'wannianqing',age:18,job:'The Front End'},
				{name:'wangxiaosan',age:19,job:'java'},
				{name:'lixiaosi',age:20,job:'The Front End'},
				{name:'sunxiaowu',age:21,job:'java'}
			]
		}
		//加載模闆方法
		function loadTemplateMustache(mustacheName,targetId,templateId,data){
			//模闆路徑
			var mustacheDir = './mustache/'+mustacheName+'.mustache';
			//渲染目标容器
			var targetContainer = $(targetId);
			if(targetContainer.length > 0){
				$.Mustache
					.load(mustacheDir)		//加載模闆檔案
					.done(function(){
						//渲染模闆
						renderTarget(targetContainer,templateId,data)
					})
			}
		}
		//渲染模闆方法
		function renderTarget(dom,templateId,data){
			var el = dom;
			el.html('');
			el.append($.Mustache.render(templateId,data));
		}

		loadTemplateMustache('demo4','#target','template',objData)
	</script>
</body>
</html>

以上~

javascript mustache.js jquery.mustache.js
上一篇: 基于systemgenerator的根号計算
下一篇: VMware下安裝Ubuntu15.04後設定root密碼

繼續閱讀