<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./lib/css/bootstrap-main.css">
<script src="./lib/js/jquery.min.js"></script>
<script src="./lib/js/art-template.js"></script>
<title>art-template渲染</title>
</head>
<body>
<div class="col-sm-11" id="middle">
</div>
<script type="text/html" id="article-detail">
{{each articleList value index}}
<h3 class="title">{{value.title}}</h3>
<h5 class="editor">作者：{{value.nickName}} 发布于:<span class="time">{{value.time}}</span> 阅读数:<span
class="read-number">{{value.viewCount}}</span></h5>
<div class="detail">
<p>{{#value.content}}</p>
</div>
<span>喜欢：{{value.likeCount}}</span>
{{/each}}
</script>
<script>
var data = {
articleList: [{
title: "标题1",
nickName: "作者1",
time: new Date(),
viewCount: 100,
content: "<p style="color:red;">内容1</p>",
likeCount: 100
},
{
title: "标题2",
nickName: "作者2",
time: new Date(),
viewCount: 100,
content: "内容2",
likeCount: 100
},
{
title: "标题5",
nickName: "作者5",
time: new Date(),
viewCount: 100,
content: "内容5",
likeCount: 100
},
{
title: "标题6",
nickName: "作者6",
time: new Date(),
viewCount: 100,
content: "内容6",
likeCount: 100
},
{
title: "标题7",
nickName: "作者7",
time: new Date(),
viewCount: 100,
content: "内容7",
likeCount: 100
},
{
title: "标题8",
nickName: "作者8",
time: new Date(),
viewCount: 100,
content: "<p>内容8</p>",
likeCount: 100
},
]
}
const htmlStr = template('article-detail', data);
$('#middle').html(htmlStr);
</script>
</body>
</html>