模板引擎的使用

模板引擎

1. 模板引擎的使用

2. 模板引擎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;
   

3. 便捷写法、、

<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>