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