js模板引擎渲染html,JavaScript模板引擎 art-template.js 的使用

一、基本使用

1、引入模板引擎(版本为4.13.2)

2、编写模板和渲染的容器

{{title}}

3、获取模板并往模板里插入数据

var data = {

title: "hello world",

desc: "

这是一段描述

"

};

var html = template("test-template",data);

4、把模板渲染到页面

document.getElementById('test-wrapper').innerHTML = html;

或者用jQuery：

$('#test-wrapper').html(html)

完成代码如下图：

template1.png

二、输出

标准语法 {{ 变量名 }}

{{title}}

原始语法

标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 EJS 一样。

三、原文输出

标准语法 {{@ 变量名 }}

{{@ title }}

原始语法

输出与原文输出的区别在于：原文输出语句不会对 HTML 内容进行转义处理，例如：

图片.png

渲染结果如下图：

结果很明显，原文输出将标签解析出来了，而输出将标签进行转义了。原文输出可能存在安全风险，请谨慎使用。

四、循环

循环可以是Arrray或者Object，语法为：

{{each target}}

{{$index}} {{$value}}

{{/each}}

例如： [图片上传失败...(image-149333-1599533198402)]

渲染结果如下图： [图片上传失败...(image-33b951-1599533198402)]

这里的$index和$value是默认的，也可以自定义：

{{each target val key}}

{{key}} {{val}}

{{/each}}

五、条件

语法为：

{{if value}} ... {{/if}}

{{if v1}} ... {{else if v2}} ... {{/if}}

六、过滤器(自定义函数)

template.defaults.imports.show = function(num,str){

console.log(num, str)

return num*666

}

使用：

{{num | show}}

或者：

{{ show(num,'hello') }}

第一种方法只能传入一个参数即 '|' 前面这个参数，第二种没有限制，跟普通函数一样。