您的位置：首页 > 其它

ajax项目中使用模板

2009-12-16 17:30 155 查看

　　以前写过一个javascript模板，也是为了提高开发效率，相应的也会牺牲一些执行效率，当然这种模板的使用也是要看情况来定的，并不是任何情况下它都能显著的效果。我个人之应用在对页面上已有的html文档插入数据时才使用的，如果html也是动态创建的，完全可以使用innerHTML。以下是代码：

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="template.js"></script>
<script type="text/javascript">
var json=[{
name:"张三",
sex:"男",
age:{value:25},
message:{a:["第一条","第二条","第三条","第四条"]}
},{
name:"李四",
sex:"女",
age:{value:12},
message:{a:["第1条","第2条","第3条","第4条"]}
}]
window.onload=function(){
template.insert(json,"info","div");
}
</script>
</head>

<body>
<div template="info">
<div><span>姓名:</span><!--{name}--></div>
<div><span>性别:</span><!--{sex}--></div>
<div><span>年龄:</span><!--{age.value}--></div>
<div>留言:
<ul>
<li template="message.a"><!--{}--></li>
</ul>
</div>
</div>
</body>
</html>

使用方法如下：

　　首先要为你准备插入数据的html文档的元素添加一个template属性，然后随便定义一个名称，我们暂且称呼这个名称为容器名，容器名是调用template.insert（）方法时的一个重要参数。

　　template.insert方法有3个参数template.insert（json数据，容器名,[添加了容器名元素的标签名称]）

　　第一个参是要插入的数据，一般是由服务器返回的json格式。第二个参数就是上面我们提到的那个template定义的属性。第三个参数是可选的，就是定义了template属性的那个元素的标签名，这个参数就是为了能加快查找速度。接着只要把json数据对应的键放到你要插入的位置就可以了。像这样

<div><span>姓名:</span><!--{name}--></div>

那个name位置插入的就是name:"张三"和name:"李四"那两条数据，我们也看到了上面的json数据时这样的 json=[{},{}]；有两条数据需要插入，遇到这种情况代码会自动循环输出插入了template属性的html代码块，所以"张三"和"李四"都会被输出。

　　正如上面提到的那样有循环体的地方我们都需要插入一个template属性，比如这里

message:{a:["第1条","第2条","第3条","第4条"]}

这里message下的a属性实际上也是一个循环体，那么就在html中要循环的地方这样设置

<li template="message.a"><!--{}--></li>

由于a的循环体内是纯数组，所以{}内为空就可以，还要注意的是这个li设置的template属性和最初设置的template属性不同的是，它不可以随意命名，而必须表明它在数据当中的位置,因为它在json数据当中的位置是[message.a[]],所以要这样写 template="message.a"。

　　第一次用可能会觉得繁琐，不太习惯，但用惯了会很快的，只要在html上设置好，其他的就不用管了，数据循环都是自动的。当然这样造成的后果就是行为层和结构层的耦合，但有时候考虑到开发效率，就要看自己平衡利弊了。还有一个问题就是ie下无法对table内使用这个模板，因为ie table的innerHTML是只读的，而这个程序的核心就是对innerHTML进行操作。暂时还没去解决这个问题，希望这个模板能对大家有所帮助。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航