<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用 artTemplate模板</title>
<!-- 第一步：引入artTemplate模板引擎 -->
<script src="/js/template.js"></script>
<style>
.on{color:#f00;}
</style>
</head>
<body>
<div id="box1"></div>
<!-- 第二步：编写模板 -->
<!--
模板的写法：
<script id="模板ID值" type="声明代码的类型是模板">
</script>
注意： 模板使用的是 script标签，必须要有两个属性： id type
-->
<script id="mytmpl" type="text/html">
<h1>{{title}}</h1>
{{each list}}
<p class="on">{{$value}}</p>
{{/each}}
</script>
<script>
window.onload=function(){
/*
* 第三步：渲染模板
* 3.1 获得数据
* 通过AJAX或者自定义，必须是 JSON数据
*
* 3.2 渲染模板
* var html=template(‘模板ID‘,JSON数据);
*
* 3.3 DOM操作将结果显示在页面上
* box1.innerHTML=html;
*/
var data={title:‘今天我中500万了‘,list: [‘文艺‘, ‘博客‘, ‘摄影‘, ‘电影‘, ‘民谣‘, ‘旅行‘, ‘吉他‘]};
var html=template(‘mytmpl‘,data);
box1.innerHTML=html;
}
</script>
</body>
</html>
时间： 2024-12-29 07:32:05