简写artTemplate模板一二

最近研发的项目当中，用到了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。