baiduTemplate模板应用实例

最新推荐文章于 2024-03-29 09:47:11 发布

denglishang

最新推荐文章于 2024-03-29 09:47:11 发布

阅读量374

点赞数 1

分类专栏：前端学习笔记文章标签： baiduTemplate KISSY JS 模板

本文链接：https://blog.csdn.net/Denglishang/article/details/81294253

版权

前端学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JS用KISSY

基础代码：（提前下载baiduTemplate.js文件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <title>baidutemplate模板应用</title>
    <script src="https://g.alicdn.com/kissy/k/1.4.8/seed-min.js"></script>
    <script type="text/javascript" src="./baiduTemplate.js"></script>
    <script type="text/javascript">
    	KISSY.use("dom,io,event",function(S,DOM,IO,Event){
    		
	  });
    </script>
</head >

<body>
    <div >
    	<table style="width:100%;" border="5" bordercolor="#007eff">
	    <tr style="background:#e6f2f8;">
		    <th style="width:25%;text-align:center;">学号</th>
		    <th style="width:25%;text-align:center;">姓名</th>
			<th style="width:25%;text-align:center;">性别</th>
			<th style="width:25%;text-align:center;">班级</th>
	    </tr>
		<tbody id="students_tbContent_body">
			 <tr><td colspan="5">数据加载中...</td></tr>
		</tbody>
    	</table>
    </div>
</body>
</html>

template模板定义：

<script id="students_list_template" type="text/html">
<% for(var i=0;i<resultlist.length;i++){
	var item=resultlist[i];
%>
	 <tr class="" name="<%- item.name%>" number="<%- item.number%>">
     	<td style="text-align:center;"><%- item.name%></td>
	 	<td style="text-align:center;"><%- item.number%></td>
     	<td style="text-align:center;"><%- item.sex%></td>
     	<td style="text-align:center;"><%- item.class%></td>
	 </tr>
<%}%>
</script>

使用模板：

<script type="text/javascript">
    	KISSY.use("dom,io,event",function(S,DOM,IO,Event){
    		 var data = {
    			"resultlist":[
    				            {
				    			"name":"张三",
				    			"number":"1001",
				    			"sex":"男",
				    			"class":"一年级二班"},
				    			{
			    				"name":"李四",
				    			"number":"1002",
				    			"sex":"女",
				    			"class":"二年级二班"},
				    			{
				    				"name":"王五",
					    			"number":"1003",
					    			"sex":"男",
					    			"class":"四年级三班"}
				    			]}; 
				    			
    		var html = baidu.template('students_list_template', data);
    		DOM.html('#students_tbContent_body', html);
    		
	  });
    </script>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <title>baidutemplate模板应用</title>
    <script src="https://g.alicdn.com/kissy/k/1.4.8/seed-min.js"></script>
    <script type="text/javascript" src="./baiduTemplate.js"></script>
    <script type="text/javascript">
    	KISSY.use("dom,io,event",function(S,DOM,IO,Event){
    		 var data = {
    			"resultlist":[
    				            {
				    			"name":"张三",
				    			"number":"1001",
				    			"sex":"男",
				    			"class":"一年级二班"},
				    			{
			    				"name":"李四",
				    			"number":"1002",
				    			"sex":"女",
				    			"class":"二年级二班"},
				    			{
				    				"name":"王五",
					    			"number":"1003",
					    			"sex":"男",
					    			"class":"四年级三班"}
				    			]}; 
				    			
    		var html = baidu.template('students_list_template', data);
    		DOM.html('#students_tbContent_body', html);
    		
	  });
    </script>
</head >
<script id="students_list_template" type="text/html">
<% for(var i=0;i<resultlist.length;i++){
	var item=resultlist[i];
%>
	 <tr class="" name="<%- item.name%>" number="<%- item.number%>">
     	<td style="text-align:center;"><%- item.name%></td>
	 	<td style="text-align:center;"><%- item.number%></td>
     	<td style="text-align:center;"><%- item.sex%></td>
     	<td style="text-align:center;"><%- item.class%></td>
	 </tr>
<%}%>
</script>
<body>
    <div >
    	<table style="width:100%;" border="5" bordercolor="#007eff">
	    <tr style="background:#e6f2f8;">
		    <th style="width:25%;text-align:center;">学号</th>
		    <th style="width:25%;text-align:center;">姓名</th>
			<th style="width:25%;text-align:center;">性别</th>
			<th style="width:25%;text-align:center;">班级</th>
	    </tr>
		<tbody id="students_tbContent_body">
			 <tr><td colspan="5">数据加载中...</td></tr>
		</tbody>
    	</table>
    </div>
</body>
</html>

实现效果：