artTemplate的一个入门demo,天气预报

2016-9-28 liyangweb.com 李杨 JavaScript

下面的小demo,主要是为了演示一下基本用法,如果在js中拼接html,将是一件非常痛苦的事情。

项目主页:

https://github.com/aui/artTemplate


实例代码:

<!DOCTYPE html>
<html>
<head>
	<title>index</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="https://raw.githubusercontent.com/aui/art-template/master/lib/template-web.js"></script>
	<style type="text/css">
		table.gridtable {
			font-family: verdana,arial,sans-serif;
			font-size:11px;
			color:#333333;
			border-width: 1px;
			border-color: #666666;
			border-collapse: collapse;
		}
		table.gridtable th {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #dedede;
		}
		table.gridtable td {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #ffffff;
		}
	</style>
</head>
<body>
	<div id="content"></div>
</body>

<script id="weather" type="text/html">
<h1>{{title}}</h1>
{{if status==1000 }}
	<div>温度:{{data.wendu}}℃</div>
	<div>{{data.ganmao}}</div>
	<div>{{data.forecast.length}}日预报:</div>
	<table class="gridtable">
		<tr>
		<th>日期</th><th>天气</th><th>风力</th><th>风向</th><th>最高气温</th><th>最低气温</th>
		</tr>
	{{each data.forecast as row i}}
		<tr>
		<td>{{row.date}}</td><td>{{row.type}}</td><td>{{row.fengli}}</td><td>{{row.fengxiang}}</td><td>{{row.high}}</td><td>{{row.low}}</td>
		</tr>
	{{/each}}
	</table>
	<br>
	<div>昨日天气</div>
	<table class="gridtable">
		<tr>
		<th>日期</th><th>天气</th><th>风力</th><th>风向</th><th>最高气温</th><th>最低气温</th>
		</tr>
		<tr>
		<td>{{data.yesterday.date}}</td><td>{{data.yesterday.type}}</td><td>{{data.yesterday.fl}}</td><td>{{data.yesterday.fx}}</td><td>{{data.yesterday.high}}</td><td>{{data.yesterday.low}}</td>
		</tr>
	</table>
{{else}}
	出错了
{{/if}}
</script>
<script type="text/javascript">
	var url = "http://wthrcdn.etouch.cn/weather_mini";
	var city = "北京";
	$.ajax({
		url:url,
		type:"get",
		dataType:"jsonp",
		data:{
			city:city
		},
		success:function(json){
			json.title=city+'天气预报';
			var data = json;
			var html = template('weather', data);
			$("#content").html(html);
		},
		error:function(){
			alert('error');
		}
	});
</script>

</html>


标签: artTemplate

评论(0) 浏览(1072)

Powered by emlog 冀ICP备13011830号-1