artTemplate入门

artTemplate模板引擎,分为简洁语法和原生语法,前者利于阅读,后者功能强大,体现在处理复杂数据处理上,我们要说的仅仅是简洁语法,话不多说,开始正题.

看一个简单的例子

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>artTemplate练习</title>
	<script src='../js/jquery-1.9.1.min.js'></script>
	<script src='../js/template.js'></script>
</head>
<body>
	<div class="content">
		
	</div>
		<!-- 基本的使用方法 -->
	<script id='wfq'>
		<h1>{{title}}</h1>
		<ul>
			{{each wfqdata as avl i }}
			<li>下标是: {{i+ 1}} : {{val}} </li>
			{{/each}}
		</ul>
		
	</script>
	<script>
		var wfqdata = {
			title : "这是一个标题",
			wfqdata : [ '安徽省' , '浙江省' , '山东省' , '福建省' , '河南省']
		}
		var wfqHtml = template('wfq' , wfqdata);
		$('.content').html(wfqHtml);
	</script>
</body>
</html>

　　需要说明的是,实际项目中我们还是要遵守三层分离的思想 ,由于便于阅读,我就索性都放在一个html文件下了

　　看我们例子中的代码,首先我们要用artTemplate的话,必须引入template.js文件,jQuery文件和template.js文件不是依赖关系,有没有都行,

上面的第一个script标签里的内容是我们定义的模板,声明一定要是id,这个是不能变成class的,,,, type="text/html"这个是可有可无的,我没有放也是有效的,但是推荐还是推荐放的.

　　artTemplate语法简单,把要显示的变量用{{}}包起来就可以,,注意{{each}} {{/each}}是类似于标签的形式存在的,这里是遍历的意思;

　　下面看第二个script里面的内容,首先声明的是一个对象,里面存放的是我们要显示在html结构上的数据,语句var wfqHtml = template('wfq' , wfqdata);声明了一个模板,第一个参数是String,就是你html结构里的id对应的值,第二个是个对象,你要加载的数据,

$('.content').html(wfqHtml);这个没什么好说的,就是把声明的模板加载到class为content的结构上,
关于模板的声明有三种方式
1

既然选择了远方,便只顾风雨兼程