template.js写入html片段,基于templatejs的html片段動态生成.doc

基于templatejs的html片段動态生成

基于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中我经常会用到循环标签，特别是遍历数据后用表格显示。Jsp本身是一种基于模板的方式来显示数据，只是它是在服务端运行生成代码。如果在客户端也有一种这样基于模板的方式显示数据，那么javascript动态生成表格不就迎刃而解了。经过请教同事和上网查询，发现已经有人开发出了这种javascript功能，就是template.js。

比如现在要动态生成一个表格如下:

区域

设备名称

端口名称

入端口(个)

出端口(个)

错包数

丢包数

错包数

丢包数

Area1

Device1

Port1

1

2

3

4

Area2

Device2

Port2

5

6

7

8

…

使用template.js将会非常简单。代码如下:

页面引入template.js文件。

在页面任意地方插入如下html代码(也就是模板)。

{for el in ds}

${el.inError}

${el.inDiscard}

${el.outError}

${el.outDiscard}

{forelse}

{/for}

其中黄色标记的地方就是类似于jsp中的标记。

初始化模板。

template.js中提供了TrimPath.parseDOMTemplate(elementId)

方法来初始化模板。

参数:elementId就是模板(隐藏的textarea)的元素id;

这里代码就是：

Var template = TrimPath.parseDOMTemplate(“template”);

基于json数据生成html代码。

var json = {“ds”:[{“areaName”:”Area1”,