最近研发的项目当中,用到了artTemplate模板,在此简写一二,一来养成做笔记的习惯,二来习惯了做笔记。
一、展示模板
<div id='mySwipe' class='swipe'><div class='swipe-wrap' id="content"></div></div>
二、存放模板
<script type="text/html" id="template">
{{each list as value i}}
<div>
<b>
<div class="q-title">{{ value.Title}}</div>
</b>
</div>
{{/each}}
</script>
此处是标准语法,也是笔者比较习惯的语法;原始语法如下:
<% for(var i = 0; i < list.length; i++){ %>
<%= list[i].Title%>
<% } %>
三、渲染模版
<script type="text/javascript">
$(window).ready(function () {
$.post("/exam/chapterexam/", function (d, s) {
if (s == "success") {
var data = {
list: d.data
}
var html = template("template", data);
$("#content").html(html);
$(".q-title").each(function () {
$(this).html($(this).text());
});
$(".q-title img").each(function () {
$(this).attr("src", "http://tiku.tydlk.cn/" + $(this).attr("src"))
});
$("button").on("click", function () {
$(this).css("background-color", "#14b5eb");
$(this).siblings().css("background-color", "rgb(221, 221, 221)");
setTimeout(function () { mySwipe.next(); }, 1000);
});
}
});
});
</script>
当然,有两个文件是需要引用的,一个是template-web.js,一个是jquery-xx.js。