基于templatejs的html片段動态生成.docVIP

基于template.js的html片段动态生成 本人由于一直从事web开发，因此在页面中编写javascript就越来越多，随着web2.0的流行，在页面中以json（JavaScript Object Notation）为数据基础的ajax（Asynchronous JavaScript and XML）页面呈现，也越来越多样和复杂。比如：基于javascript的动态表格呈现。在以前，我一直是通过如下代码创建一个表格。 创建表格: var tab = document.createElement(table); 创建行: var row = tab.insertRow(tab.rows.length); 创建单元格： var cell = row.insertCell(row.cells.length); 在单元格内插入内容： 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将会非常简单。代码如下: 页面引入template.js文件。 script type=”text/javascript” src=”template.js”/script 在页面任意地方插入如下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标记。 初始化模板。 template.js中提供了TrimPath.parseDOMTemplate(elementId) 方法来初始化模板。 参数:elementId就是模板（隐藏的textarea）的元素id; 这里代码就是： Var template = TrimPath.parseDOMTemplate(“template”); 基于json数据生成html代码。 var json = {“ds”:[{“areaName”:”Area1”, “devName”:”device1”, “objName”:”port1”, “inError”:”1”, “inDiscard”:”2”, “outError”:”3”, “outDiscard”:”4”}, {“areaName”:”Area2