有时候，我们不需要太牛逼太强大的JavaScript模板引擎（比如jQuery tmpl或者handlebarsjs），我们只是需要在简单的模板里绑定一些非常简单的字段，本文将使用非常简单的技巧来帮你实现这个小功能。
首先我们先来定义我们需要的模板，在id为template的script块里：前端UI分享
01 |
<!doctype
html> |
02 |
<html> |
03 |
<head> |
04 |
<meta
charset=utf-8> |
05 |
<title>Simple
Templating</title> |
06 |
</head> |
07 |
<body> |
08 |
|
09 |
<div
class="result"></div> |
10 |
|
11 |
<script
type="template" id="template"> |
12 |
<h2> |
13 |
<a
href="{{href}}"> |
14 |
{{title}} |
15 |
</a> |
16 |
</h2> |
17 |
<img
src="{{imgSrc}}" alt="{{title}}"> |
18 |
</script> |
19 |
|
20 |
</body> |
21 |
</html> |
然后，我们需要通过Ajax等其它方式获取所需要的数据，这里为了展示方便，我们使用了自己定义的数组：
01 |
var data
= [ |
02 |
{ |
03 |
title:
"Knockout应用开发指南", |
04 |
href:
"http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0627/281.html", |
05 |
imgSrc:
"http://www.jcodecraeer.com" |
06 |
}, |
07 |
{ |
08 |
title:
"微软ASP.NET站点部署指南", |
09 |
href:
"http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0627/281.html", |
10 |
imgSrc:"http://www.jcodecraeer.com" |
11 |
}, |
12 |
{ |
13 |
title:
"HTML5学习笔记简明版", |
14 |
href:
"http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0627/281.html", |
15 |
imgSrc:
"http://www.jcodecraeer.com" |
16 |
} |
17 |
], |
我们有2种方式来绑定这些数据到模板上，第一种是非常简单的hardcode方法，第二种是自动识别变量式的。
我们先来看第一种方式，是通过替换花括号里的值为data里所对应的值来达到目的：前端UI分享
01 |
template
= document.querySelector(‘#template‘).innerHTML, |
02 |
result
= document.querySelector(‘.result‘), |
03 |
i
= 0, len = data.length, |
04 |
fragment
= ‘‘; |
05 |
|
06 |
for (
; i < len; i++ ) { |
07 |
fragment
+= template |
08 |
.replace(
/\{\{title\}\}/, data[i].title ) |
09 |
.replace(
/\{\{href\}\}/, data[i].href ) |
10 |
.replace(
/\{\{imgSrc\}\}/, data[i].imgSrc ); |
11 |
} |
12 |
|
13 |
result.innerHTML
= fragment; |
第二种方式比较灵活，是通过正则表达式来替换所有花括号的值，而无需一个一个替换，这样相对来说比较灵活，但是要注意模板标签可能在数据里不存在的情况：
01 |
template
= document.querySelector(‘#template‘).innerHTML, |
02 |
result
= document.querySelector(‘.result‘), |
03 |
attachTemplateToData; |
04 |
|
05 |
//
将模板和数据作为参数，通过数据里所有的项将值替换到模板的标签上（注意不是遍历模板标签，因为标签可能不在数据里存在）。 |
06 |
attachTemplateToData
= function(template,
data) { |
07 |
var i
= 0, |
08 |
len
= data.length, |
09 |
fragment
= ‘‘; |
10 |
|
11 |
//
遍历数据集合里的每一个项，做相应的替换 |
12 |
function replace(obj)
{ |
13 |
var t,
key, reg; |
14 |
|
15 |
//遍历该数据项下所有的属性，将该属性作为key值来查找标签，然后替换 |
16 |
for (key
in obj)
{ |
17 |
reg
= new RegExp(‘{{‘ +
key + ‘}}‘,
‘ig‘); |
18 |
t
= (t || template).replace(reg, obj[key]); |
19 |
} |
20 |
|
21 |
return t; |
22 |
} |
23 |
|
24 |
for (;
i < len; i++) { |
25 |
fragment
+= replace(data[i]); |
26 |
} |
27 |
|
28 |
return fragment; |
29 |
}; |
30 |
|
31 |
result.innerHTML
= attachTemplateToData(template, data); |
这样，我们就可以做到，无限制定义自己的标签和item属性了，而无需修改JS代码。
原文地址：http://blog.csdn.net/ariss123/article/details/38898039
