腾讯前端js模板引擎artTemplate使用文档兼容ie6789各浏览器
腾讯前端js模板引擎artTemplate使用文档兼容ie6789各浏览器
腾讯前端js模板引擎artTemplate使用文档兼容ie6789各浏览器
说明介绍
artTemplate是一款基于js的模板解析引擎,兼容ie6+,谷歌,火狐等浏览器,可以说是兼容了市面上大部分的浏览器。所以,这个将是我们进行前端开发的利器。
它的解析是配合json数据,然后进行界面渲染。所以,我们需要有一定的json基础知识,并且,从服务器获取到的信息,也需要是json格式的。
为方便操作dom,后面的内容中,我们会引入jquery.js
引入template.js
引入线上的template.js
<script type="text/javascript" src="http://www.sjmoban.com/static/js/template.js"></script>
下载到本地,引用template.js
<script type="text/javascript" src="static/js/template.js"></script>
完整的html代码
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<!--listbox 存放解析后的html代码-->
<div id="listbox"></div>
<!--template模板-->
<script type="text/html" id="template">
<%=msg%>
</script>
</body>
</html>
<script src="http://www.sjmoban.com/study/artTemplate/static/js/template.js"></script>
<script>
var data={
msg:"Hello World"//msg变量,可在模板中使用<%=msg%>调用
};
var html=template("template",data);//得到解析后的字符串
document.getElementById("listbox").innerHTML=html;//放到存放字符串的容器中
</script>渲染结果(在ie6浏览器里面)

下一篇:
artTemplate的使用结构