中文前端UI框架Kit（十二）整合Mustache做kitjs模板引擎，基本寫法${varname}

號外：kitjs官方討論QQ群建立了，QQ群號88093625，歡迎大家加入，討論前端相關話題

kit整合了優秀的javascript模板引擎Mustache，做模板模塊，基本寫法為${varname}

demo地址：http://xueduany.github.com/KitJs/KitJs/index.html#template

jsdoc地址：http://localhost/jsdoc/out/$Kit.Template.html

基本用法如下，如果需要了解更多特殊用法，請訪問Mustache官網http://mustache.github.com/

1.簡單變量替換${name}

function _a1() {
	$kit.el('#a1').innerHTML = $kit.template.render('${name} is awesome', {
		name : '<b style="color:red">Willy</b>'
	});
}
			

2.如果變量含有html的代碼的，例如：<br>、<tr>等等而不想轉義可以在用${&name}

function _a2() {
	$kit.el('#a2').innerHTML = $kit.template.render('${&name} is awesome', {
		name : '<b style="color:red">Willy</b>'
	});
}
			

3.如果是對象，還能解釋其屬性

function _a3() {
	$kit.el('#a3').innerHTML = $kit.template.render("name:${name.first} ${name.last},age:${age}", {
		"name" : {
			"first" : "Chen",
			"last" : "Jackson"
		},
		"age" : 18
	});
}
			

4.${#param}這個標簽很強大，有if判斷、forEach的功能。

function _a4() {
	$kit.el('#a4').innerHTML = $kit.template.render("Shown.${#nothin}Never shown!${/nothin}", {
		"nothin" : true
	});
}
			

如果nothin是空或者null，或者是false都會輸出Shown.相反則是Shown.Never shown!。

5.迭代

function _a5() {
	$kit.el('#a5').innerHTML = $kit.template.render("${#stooges}${name}${/stooges}", {
		"stooges" : [ {
			"name" : "Moe"
		}, {
			"name" : "Larry"
		}, {
			"name" : "Curly"
		} ]
	});
}
			

6.如果迭代的是數組，還可以用${.}來替代每個元素

function _a6() {
	$kit.el('#a6').innerHTML = $kit.template.render("${#musketeers}* ${&.}${/musketeers}", {
		"musketeers" : [ "Athos", "Aramis", "Porthos", "D'Artagnan" ]
	});
}
			

7.迭代輸出的還可以是一個function返回的結果，function可以讀取當前變量的上下文來獲取其他屬性執行其他操作

function _a7() {
	$kit.el('#a7').innerHTML = $kit.template.render("${#beatles} *${name}${/beatles}", {
		"beatles" : [ {
			"firstName" : "John",
			"lastName" : "Lennon"
		}, {
			"firstName" : "Paul",
			"lastName" : "McCartney"
		}, {
			"firstName" : "George",
			"lastName" : "Harrison"
		}, {
			"firstName" : "Ringo",
			"lastName" : "Starr"
		} ],
		"name" : function() {
			return this.firstName + " " + this.lastName;
		}
	});
}
			

8：方法里面可以再執行變量中的表達式

function _a8() {
	$kit.el('#a8').innerHTML = $kit.template.render("${#bold}Hi ${name}.${/bold}", {
		"name" : "${age}" + "Tater",
		"bold" : function() {
			return function(text, render) {
				console.log(text);
				return "" + render(text) + "";
			};
		},
		"age" : 18
	});
}
			

9.{{^}}與{{#}}相反，如果變量是null、undefined、 false、和空數組講輸出結果

10.{{! }}注釋