基于templatejs的html片段动态生成
基于
template.js
的
html
片段动态生成
本人由于一直从事
web
开发，因此在页面中编写
javascript
就越来越多，随着
web2.0
的流行，在页面中以
json
（
JavaScript
Object
Notation
）为数据基础的
ajax
（
Asynchronous
JavaScript and XML
）页面呈现，也越来越多样和复杂。比如：基于
javascript
的动态表格
呈现。在以前，我一直是通过如下代码创建一个表格。
1.
创建表格
:
var
tab = document.createElement(
"table"
);
2.
创建行
:
var
row = tab.insertRow(tab.rows.length);
3.
创建单元格：
var
cell = row.insertCell(row.cells.length);
4.
在单元格内插入内容：
cell.innerHTML =
"
内容
"
;
上述代码看上去不是很复杂，但是在实际应用中，要想适用千变万化的表格展现形式，就
会是一件让人头痛的事情。
我一直期望能有什么好的方法可以让我从这种直接的由
javascript
代码构建表格中解脱出来。
Jsp
（
Java Server Pages
）编写是我们在
j2ee
（
Java 2 Platform, Enterprise Edition
）
开发中最常用的技术。其中提供的
jstl
（
JSP Standard Tag Library
），提高了我们
jsp
编
写效率。
Jstl
中我经常会用到
<c:foreach>
循环标签，特别是遍历数据后用表格显示。
Jsp
本
身是一种基于模板的方式来显示数据，
只是它是在服务端运行生成代码。
如果在客户端也有一
种这样基于模板的方式显示数据，那么
javascript
动态生成表格不就迎刃而解了。经过请教
同事和上网查询，发现已经有人开发出了这种
javascript
功能，就是
template.js
。
比如现在要动态生成一个表格如下
:
区域
设备名称
端口名称
入端口
(
个
)
出端口
(
个
)
错包数
丢包数
错包数
丢包数
Area1
Device1
Port1
1
2
3
4
Area2
Device2
Port2
5
6
7
8
„
使用
template.js
将会非常简单。代码如下
:
1.
页面引入
template.js
文件。
<script
type=”text/javascript” src=”template.js”
></script>
2.
在页面任意地方插入如下
html
代码（也就是模板）。
<textarea id="template" style="display:none">
<table width="100%" border="0" align="center">
<tr>
<td rowspan="2" >
区域
</td>
<td rowspan="2" >
设备名称
</td>
<td rowspan="2" >
端口名称
</td>
<td colspan="2" >
入端口
(
个
)</td>
<td colspan="2" >
出端口
(
个
)</td>
</tr>
<tr>
<td >
错包数
</td>
<td >
丢包数
</td>
<td >
错包数
</td>
<td >
丢包数
</td>
</tr>
{for el in ds}
<tr>
<td >${el.areaName}
</td>
<td>${el.devName}
</td>
<td>${el.objName}
</td>
<td>
${el.inError}
</td>
<td>
${el.inDiscard}
</td>
<td>
${el.outError}
</td>
<td>
${el.outDiscard}
</td>
</tr>
{forelse}
<tr>
<td colspan="7" >
无数据
</td>
</tr>
{/for}
</table>
</textarea>
其中黄色标记的地方就是类似于
jsp
中的
<c:foreach>
标记。
3.
初始化模板。
template.js
中提供了
TrimPath.parseDOMTemplate(elementId)
方法来初始化模板。
参数
:elementId
就是模板（隐藏的
textarea
）的元素
id;
这里代码就是：
Var template = TrimPath.parseDOMTemplate(“template”);
4.
基于
json
数据生成
html
代码。
v
ar json = {“ds”:[{“areaName”:”
Area
1”,
“
devName
”:”device1”,
“objName”:”port1”,
“inError”:”1”,
“inDiscard”:”2”,
“outError”:”3”,
“outDiscard”:”4”
},
{“areaName”:”Area2”,
“devName”:”device2”,
“objName”:”port2”,
“inError”:”5”,
“inDiscard”:”6”,
“outError”:”7”,
“outDiscard”:”8”}
]};
template.js
提供了模板的
process
（
jsonData
）生成
html
，参数
jsonData
就是
json
数据。
var html = template.process(json);
此时
html
就是生成的表格代码，可以将表格代码插入到指定的
div
中，
如：
d
ocument.getElementById(“div1”).innerHTML= html;
就是这么简单，将复杂的表格完成了。当然这里只是介绍了
template.js
中的一部分，它还可
以使用条件判断，执行
javascript
方法。如果有兴趣可以研究一下，我相信这是将会是您进
行
web2.0
开发的一个利器。