主攻帝国 全栈为辅

腾讯前端js模板引擎artTemplate使用文档兼容ie6789各浏览器

腾讯前端js模板引擎artTemplate使用文档兼容ie6789各浏览器

腾讯前端js模板引擎artTemplate使用文档兼容ie6789各浏览器

说明介绍

    artTemplate是一款基于js的模板解析引擎,兼容ie6+,谷歌,火狐等浏览器,可以说是兼容了市面上大部分的浏览器。所以,这个将是我们进行前端开发的利器。
    它的解析是配合json数据,然后进行界面渲染。所以,我们需要有一定的json基础知识,并且,从服务器获取到的信息,也需要是json格式的。

为方便操作dom,后面的内容中,我们会引入jquery.js

引入template.js

  1. 引入线上的template.js

<script type="text/javascript" src="http://www.sjmoban.com/static/js/template.js"></script>
  1. 下载到本地,引用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浏览器里面)