模板引擎
-
模板引擎的使用
-
模板引擎ArtTemplate腾讯的原生写法
<script src="./js/template-native.js"></script>
引用、、语法
// 如果数据是一个对象,就直接传入对象 // 如果数据是一个数组,就包装对对象再传递 // 因为在模板中只能使用当前传入的对象的属性,它会根据属性自动的去获取对应的值来使用<script type="text/template" id="navTemp"> <% for(var i=0;i<items.length;i++){ %> <li> <a href="#"> <img src="<%=items[i].src%>" alt=""> <p><%=items[i].text%></p> </a> </li> <% } %>
console.log(arr) 调用方法var html = template("navTemp", { "items": arr }); // console.log({ // 'items': arr // }) // console.log(html); document.querySelector("ul").innerHTML = html;
-
便捷写法、、
<script type="text/template" id="musicTemp">
{{each items as value index}}
{{if index == 0}}
<tr bgcolor='red'>
{{else if index == 1}}
<tr bgcolor='green'>
{{else}}
<tr bgcolor='blue'>
{{/if}}
<td>{{items[index].title}}</td>
<td>{{value.singer}}</td>
<td>{{value.album}}</td>
<td>
<audio src="{{value.src}}" controls></audio>
</td>
<td>
<a href="./edit.php?id={{value.id}}" class="btn btn-primary">编辑</a>
<a href="./delete.php?id={{value.id}}" class="btn btn-danger">删除</a>
</td>
</tr>
{{/each}}
</script>
<script src="./js/jquery.min.js"></script>
<script src="./js/template.js"></script>
<script>
// 发送ajax请求
$.ajax({
url: "./music.php",
dataType: 'json',
success: function (result) {
// 调用模板引擎动态生成页面结构
// 如果参数是对象是直接传入对象
// 如果参数是数组,就包装为对象
var html = template("musicTemp",{"items":result});
$("tbody").html(html);
}
});
</script>