artTemplate模板引擎学习实战
来源:互联网 发布:南阳理工软件最强 编辑:程序博客网 时间:2024/05/18 19:19
以下对artTemplate模板引擎的介绍会分为如下几部分内容:
1.artTemplate模板引擎的基本语法结构
2.artTemplate模板引擎的基本使用方法
2.1:使用一个type="text/html"
的script
标签存放模板
2.2:在javascript中存放模板
2.3:嵌入子模板(include)
3.artTemplate模板引擎使用实战
1.artTemplate基本语法结构
artTemplate的语法结构很简单,就是{{}}。{{}}
符号包裹起来的语句则为模板的表达式。表达式又分为 输出表达式,条件表达式,遍历表达式,模板包含表达式。具体的可以看看GitHub:artTemplate 简洁语法版。官网对语法介绍的还可以,不过在这里想在说一句,要记住表达式的写法和表达式有哪些分类,对于理解引擎很有帮助。
2.artTemplate模板引擎的使用方法
首先,需要去官网下载 简洁语法版 ,然后在body底部加载script文件。文件很小,只有2.7kb,可是功能十分强大。
2.1:使用一个type="text/html"
的script
标签存放模板
使用script存放模板的时候要注意两个方面。
一方面是必须给script标签定义id,而且只能是id,不能是class。因为在使用template(id,data)方法的时候,该方法会根据id渲染模板,引擎内部会根据document.getElementById(id)
查找模板。如果使用class作为参数,artTemplate引擎会报错。如果没有 data 参数,将返回一渲染函数。
另外一方面是在<!DOCTYPE html>script标签中的type类型默认为type/javascript。在script标签中,必须重新声明type类型为text/html,否则会没有效果。
使用方法如下
<script id="test" type="text/html"> <h1>{{title}}</h1> <ul> {{each list as value i}} <li>索引{{i+1}} : {{value}}</li> {{/each}} </ul> </script> <script> var data = { title:'My Life', list:['篮球','桌球','游泳','滑轮','读书'] }; var html = template('test',data); $('.rascal').html(html); </script>
渲染的页面如下:
2.2:在Javascript中存放模板
在Js中存放模板应该会很少用到,因为在前端领域有一条军规,结构样式和行为三者必须分离。如果把模板放在js文件内,会破坏这条规定。
看看例子,知道一下调用的规则。实质上就是一段拼接字符串的过程。
<script type="text/javascript"> var source ="<ul>" + "{{each list as value i}}" + "<li>索引{{i+1}}:{{value}}</li>" + "{{/each}}" + "</ul>"; var render = template.compile(source); var html = render({ list:['篮球','桌球','游泳','滑轮','读书'] }); $('.rascal').html(html); </script>
2.3:嵌入子模板(include)
嵌套模板跟第一种方法原理相同,只不过在一个模板中调用了另外一个模板而已。
<script id='test' type='text/html'> <h1>My Life</h1> {{include 'list'}} </script> <script id='list' type='text/html'> <ul> {{each list as value i}} <li>索引{{i+1}}:{{value}}</li> {{/each}} </ul> </script> <script> var data = { "list":['篮球','桌球','游泳','滑轮','读书'] }; var html = template('test',data); $('.rascal').html(html); </script>
3.artTemplate模板引擎使用实战
artTemplate官网给出的每一个例子其实都已经很好了,可以让每一个人都很容易的明白。不过我认为唯一的缺点就是,例子中的数据完全都是自己定义的。在实际开发中,用户看到的每一个商品数据是这样来的:首先后端攻城狮通过特定语法连接数据库,然后将从数据库中获取的数据转换成JSON格式,最后前端攻城狮在通过一些方法将JSON数据渲染到页面上。所以我们的数据不能自己瞎造,而是通过Ajax异步加载。
在我的一篇 淘宝购物车页面 智能搜索框Ajax异步加载数据 文章中,一开始是使用手写拼接字符串的方法去拼接字符串,这种方法效率低,容易出错。后来全部改成了js模板引擎的方法。所以我会以淘宝购物车页面中智能搜索框Ajax异步加载商品数据的例子来说明artTemplate模板引擎。
先放上一段代码。主要还是想通过这个简单的例子说明接下来要探讨的问题。
<script id="test" type="text/html"> <h1>{{title}}</h1> <ul> {{each list as value i}} <li>索引{{i+1}} : {{value}}</li> {{/each}} </ul> </script> <script> var data = { title:'My Life', list:['篮球','桌球','游泳','滑轮','读书'] }; var html = template('test',data); $('.rascal').html(html); </script>
上面代码中,要注意几点的就是:
♥ 遍历表达式中的list必须与脚本中data对象中的list同名,而且遍历表达式中的list必须是data对象中的一个属性。循环表达式中,要循环的是每一个data对象中的list数组,而不是data对象,这点很重要。
在这个例子中,data对象中list属性是一个数组,数组中的每一个值都是简单数据类型,篮球桌球等。当然,可以往数组中传入复杂数据类型,如对象。说明这个主要是因为在循环表达式中循环的数据和给template()传入第二个参数的时候很容易出错。
♥ 使用template方法时,第一个参数必须是id,而不能是class。
放上一段json数据代码。
上面代码中,是一段需要被Ajax异步加载数据的商品数据。
再放上使用一个type="text/html"
的script
标签存放模板的代码。
上面代码中是需要被渲染的模板。比手写拼接字符串简单很多,并且效率高,错误率低。
最后放上js实现相应功能的部分重要代码。
$.get('search.json',{'Query':$val}, function(data) { for (var i = 0; i < data.length; i++) { //如果值与json中的query字段匹配,动态加载html if ($val === data[i][0].Query) { var results = data[i][0].Results[0]; //js模板引擎 var $html = template('search',results); $('.list').html($html) } }});
这里想说的是给template方法的第二个参数和循环表达式需要被循环的字段。
第一点是给template方法的第二个参数。第二个参数传入了results,这里的results实质上就是在上面例子中data对象。只不过在JSON数据中results是一个数组。
第二点是在JS模板引擎中。在模板中是这样写的:{{each Suggests as value i}},这里的Suggests其实就相当于data对象中的list属性。在data对象中,list是一个数组,并且每个值都是字符串;而在results数组中,Suggests是一个数组,不过它的每一个值都是复杂数据类型,是对象。如果对数据类型不明白的,可以前往这篇文章:Javascript对象 。
artTemplate使用实战就介绍完了。在template方法的第二个参数和遍历表达式中需要被遍历的数据很容易写错,希望同学可以注意这一点。
如果有不明白或者写错的地方,可以给我留言。
- artTemplate模板引擎学习实战
- 腾讯js模板引擎 artTemplate 学习
- js模板引擎artTemplate学习总结
- javascript模板引擎 artTemplate
- javascript模板引擎 Arttemplate
- Arttemplate 前端模板引擎
- ArtTemplate模板引擎入门
- JS模板引擎 :ArtTemplate
- JavaScript模板引擎-artTemplate
- javascript 模板引擎artTemplate
- 前端模板引擎 artTemplate
- artTemplate模板引擎
- javascript 模板引擎artTemplate
- JavaScript模板引擎-artTemplate
- 模板引擎ArtTemplate使用方法
- artTemplate模板引擎使用
- artTemplate模板引擎
- 模板引擎artTemplate 介绍
- 符号链接与设备接口名
- CuratorFramework实现zookeeper文件夹与文件的上传下载
- 浅谈企业核心竞争力
- Android AndroidManifest.xml文件的android:supportsRtl属性详解
- ssdb安装和配置
- artTemplate模板引擎学习实战
- Linux查看双网卡绑定设置
- MenuItemCompat.getActionView(item)返回null
- angularJS-通过provider实现全局变量的读取和赋值
- 富文本属性2
- web架构中的前置机
- three.js 贴图为图片时跨域问题
- Eclipse中安装tomcat
- PHPStorm IDE 快捷键(MAC)