相关概念
之前在渲染UI
结构时候,拼接字符串是比较麻烦的,而且很容易出现问题
模板引擎,它可以根据程序员指定的 模板结构 和 数据,自动生成一个完整的HTML页面
好处
- 减少了字符串的拼接操作
- 使代码结构更清晰
- 使代码更易于阅读与维护
art-template模板引擎
简介
art-template 是一个简约,超快的模板引擎,中文官首页: 点击前往.
安装
- 浏览器访问 http://aui.github.io/art-template/zh-cn/docs/installation.html
- 找到 安装 导航栏,找到下载链接,右键下载即可
基本使用
通过传统方式渲染的过程,我们了解到,动态去渲染UI
的时候需要大量去拼接字符串,比较的麻烦,而且复用性也不是很好
art-template使用步骤
-
导入
art-template
- 在window全局,就多了一个函数,叫做 template(‘模板id’,需要渲染的数据对象)
<script src="./lib/template-web.js"></script>
-
定义数据
var data = { name: 'zs', age: 20}
-
定义模板
- 模板的 HTML 结构,必须定义到
script
标签中,注意:需要把type属性改成text/html
- 给 模板 添加一个
id
- 模板里面如果需要使用到传入的数据,利用 {{}} 来实现,例如:{{name}},那么就会去找 我们调用 template() 函数 第二个参数里面对应的
name
属性的值
<script type="text/html" id="tpl-user"> <h1>{{name}} ------ {{age}}</h1> </script>
- 模板的 HTML 结构,必须定义到
-
调用
template
函数- 函数的返回值就是拼接好的模板字符串
var htmlStr = template('tpl-user', data)
-
渲染
HTML
结构- 最后我们需要把template返回的模板字符串设置到页面容器中
现在body中添加一个div <div id="container"></div> 然后渲染 $('#container').html(htmlStr)
标准语法
什么是标准语法
art-template 提供了 {{}} 这种语法格式,在 {{}} 内可以进行 变量输出 或 循环数组 等操作,这种 {{}} 语法在 art-template 中被称为标准语法
输出
在 {{}} 语法中,可以进行 变量 的输出,对象属性的输出,三元表达式输出,逻辑或输出,加减乘除等表达式输出
原文输出
如果输出的 value 值中,包含了 HTML 标签结构,则需要使用原文输出语法,才能保证HTML标签被正常渲染
条件输出
如果要实现条件输出,则可以在 {{}} 中使用 if…else if…/if 的方式,进行按需输出
循环输出
如果要实现循环输出,则可以在{{}} 内,通过 each 语法循环数组,当前循环的索引使用 $index
进行访问,当前循环项使用 $value
进行访问
过滤器
过滤器本质就是一个 function
函数
语法
过滤器语法类似于 管道操作符,它的上一个输出作为下一个输入
定义过滤器的基本语法如下:
template.defaults.imports.filterName= function(value){/* return处理的结果*/}
案例-格式化时间过滤器
-
定义数据
var data = { regTime: new Date() }
-
定义过滤器
// 定义处理时间的过滤器 template.defaults.imports.dateFormat = function (date) { var y = date.getFullYear() var m = date.getMonth() + 1 var d = date.getDate() return y + '-' + m + '-' + d }
-
在模板引擎中使用过滤器
<script type="text/html" id="tpl-user"> <h3>{{regTime | dateFormat}}</h3> </script>