模板引擎

1.模板引擎

1.1 为什么要使用模板引擎

通过搜索案例我们发现，要渲染到网页上的数据是使用js循环拼接字符串，再将拼接好的字符串填入tbody标签中的。

这种方式可读性差，出错不容易查找。

模板引擎技术就是为了解决字符串拼接问题的。 ==模板引擎技术本质就是拼接字符串。==

传统模式有两种拼接显示字符串的方式:

• 在后端程序中拼接好，然后以字符串形式返回

• 后端程序返回json对象，前端程序接收了之后，解析json进行拼接

模板引擎方式： 模板引擎属于前端程序拼接字符串 提前定义好要显示格式，所有数据位置以特殊标记表示出来。模板引擎会自动分析，并将数据填写到对应的位置。

 

1.2 常见模板引擎

ArtTemplate：https://github.com/aui/artTemplatevelocity.js：https://github.com/shepherdwind/velocity.jsHandlebars：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}}