artTemplate入门
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
以上是关于artTemplate入门的主要内容，如果未能解决你的问题，请参考以下文章
artTemplate--使用artTemplate时，由于json对象属性有特殊格式 导致调用报错artTemplate,syntax error,Template Error