<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>art-template</title>
<!--兼容ie8处理-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
</head>
<body>
<div id="content"></div>
<div id="asyn"></div>
<!--原生写法-->
<!--<script id="index" type="text/html">-->
<!--<h1>姓名：<%= name %></h1>-->
<!--<h4>性别：<%= sex %></h4>-->
<!--</script>-->
<!--简化写法-->
<script id="asyns" type="text/html">
<h1>异步：{{asynData.asyn}}</h1>
</script>
<script id="index" type="text/html">
<h1>姓名：{{name}}</h1>
<h4>性别：{{sex}}</h4>
{{include 'lists'}}
</script>
<script id="lists" type="text/html">
<ul>
{{each hobbys}}
<li>{{$index}} {{$value}}</li>
{{/each}}
</ul>
</script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/art-template.min.js"></script>
<script>
var obj = {
name: '张三',
sex: '男',
hobbys:['爱好1','爱好2'],
asynData:{
asyn: 'true'
}
};
//标准使用及引入子模板
var _index2 = template('index', obj);
//art-template配置
template.defaults.minimize = true;//是否压缩 HTML 多余空白字符
document.getElementById('content').innerHTML = _index2;
//异步
setTimeout(()=>{
var _index = template('asyns', obj);
//art-template配置
template.defaults.minimize = true;//是否压缩 HTML 多余空白字符
document.getElementById('asyn').innerHTML = _index;
},3000)
</script>
</body>
</html>art-template模板引擎
猜你喜欢
转载自blog.csdn.net/bbsyi/article/details/81453980
今日推荐
周排行