模板引擎
1.模板引擎
1.1 为什么要使用模板引擎
通过搜索案例我们发现,要渲染到网页上的数据是使用js循环拼接字符串,再将拼接好的字符串填入tbody标签中的。
这种方式可读性差,出错不容易查找。
模板引擎技术就是为了解决字符串拼接问题的。 ==模板引擎技术本质就是拼接字符串。==
传统模式有两种拼接显示字符串的方式:
-
在后端程序中拼接好,然后以字符串形式返回
-
后端程序返回json对象,前端程序接收了之后,解析json进行拼接
模板引擎方式: 模板引擎属于前端程序拼接字符串 提前定义好要显示格式,所有数据位置以特殊标记表示出来。模板引擎会自动分析,并将数据填写到对应的位置。
1.2 常见模板引擎
ArtTemplate:https://github.com/aui/artTemplatevelocity.js:https://github.com/shepherdwind/velocity.jsHandlebars:http://handlebarsjs.com
1.3 artTemplate快速上手
基本使用步骤: 1) 使用script标签引入arttemplate库文件 (template-web.js) 2) 定义标签,用来显示最终解析好的模板信息 3) 定义模板和模板中所需数据。 ① 定义要显示在模板中的数据,必须是 json 对象 ② 使用script标签定义模板,type="text/template" id="tpl",并且使用 {{}} 将所有数据位置标记出来 4) 调用template函数,解析模板 5) 将解析好的模板字符串填充到事先定义好的标签中(显示到网页上)
简单案例:拼接模板字符串 “我叫张三,今年20岁”,并输出在网页的div中
① 引入 template-web.js库文件
② 定义标签,用来显示最终解析好的模板信息
③ 定义数据和模板
④ 调用template函数将数据和模板揉到一起
⑤ 将解析好的字符串写入定义好的标签中
关键点:
1) 在定义模板时使用 script 标签, type=“text/==template==” id="tpl"2) 定义json对象,json对象中的key一定要和模板中的 {{key}}一致3) 调用template函数进行解析 参数1: 模板的id值 参数2: json对象 返回值:解析好的字符串
1.4 循环结构 --- each
关键点: 1) template函数需要的参数是一个json对象,所以需要声明json对象,里面是数组
2) 在定义模板时使用each进行循环
each结构:
{{each data as value}}
输出内容
{{/each}}
data: 要循环的数组
value: 循环取出的单元值
注意: 使用 {{/each}} 结束循环
① 使用script标签引入arttemplate库文件 (template-web.js)
② 定义标签,显示最终结果的标签
③ 定义数据和模板
④ 调用template函数,将数组和模板进行解析
⑤ 将解析好的字符串显示到div中
1.5 选择结构 --- if else
关键点: 定义模板时使用
{{if 判断条件}}
程序块1
{{else}}
程序块2
{{/if}}