artTemplate的使用结构
本节目的本节主要是讲解了artTemplate的使用结构 ，以让我们在使用的过程中，保持清晰的逻辑结构 。结构分析template.js的引用存放解析后的html代码的盒子模板代码待渲染的数据
本节目的
本节主要是讲解了artTemplate的使用结构 ，以让我们在使用的过程中，保持清晰的逻辑结构 。
结构分析
template.js的引用
存放解析后的html代码的盒子
模板代码
待渲染的数据
引入template.js
<script type="text/javascript" src="http://www.sjmoban.com/static/js/template.js"></script>
存放解析后的html的盒子
<div id="listbox"></div>
模板代码
<script type="text/html" id="template"> <%=msg%> </script>
待渲染的数据
<script type="text/javascript">
var data={
msg:"Hello World!"
};
</script>使用代码
<script type="text/javascript">
var html=template("template",data);//编译解析字符串
document.getElementById("listbox").innerHTML=html;//入到模板中
</script>完整的代码
<!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>
<div id="listbox"></div>
<script type="text/html" id="template">
<%=msg%>
</script>
</body>
</html>
<script src="static/js/template.js"></script>
<script>
var data={
msg:"Hello World"
};
var html=template("template",data);
document.getElementById("listbox").innerHTML=html;
</script>