tempalte.js例子

最新推荐文章于 2024-07-24 16:59:56 发布

wuxing164

最新推荐文章于 2024-07-24 16:59:56 发布

阅读量626

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/wuxing164/article/details/53863782

js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个简单的模板引擎应用实例，展示了如何使用模板引擎将数据渲染到HTML中。通过一个具体的例子，我们学习了如何定义模板及如何利用JavaScript来加载数据并呈现到网页上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面html

<script id="test" type="text/html">
<h1><%=title%></h1>
<ul>
<%for(i = 0; i < list.length; i ++) {%>
<li>条目内容 <%=i + 1%> ：<%=list[i]%></li>
<%}%>
</ul>
</script>
<div id="content"></div>

模板逻辑语法开始与结束的界定符号为<% 与%>，若<%后面紧跟=号则输出变量内容。

//--js代码

<script type="text/javascript" src="../js/template.js"></script>
//引入template.js
<script type="text/javascript">

//数据可以用ajax异步请求php程序,json格式返回
var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template.render('test', data);
//document.getElementById('content').innerHTML = html;
$("#content").html(html);
</script>

例子http://www.cnblogs.com/itxiongwei/p/5567088.html