开发笔记 首页 > 开发笔记

artTemplate的使用结构

图文分享 发布时间:2018-12-02 19:35:22 已被阅读: 10 织梦帝国微信小程序

本节目的

本节主要是讲解了artTemplate的使用结构 ,以让我们在使用的过程中,保持清晰的逻辑结构 。

结构分析

  1. template.js的引用

  2. 存放解析后的html代码的盒子

  3. 模板代码

  4. 待渲染的数据

引入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>


目录
友情链接:
在线客服
微信号

微信扫码加好友