JavaScript模板语言

JavaScript模板语言

 

 

 

1. artTemplate

1.1 快速入门

1.2 语法

1.2.1 原始与标准

1.2.2 输出

1.2.3 条件

1.2.3 循环

1.2.3 设置变量

1.2.4 模板继承

1.2.5 子模板

1.2.6 过滤器

1.2.7 调试

1.2.8 模板变量

1.2.9 压缩页面

1.2.10 API

2. thymeleaf

spring-boot 中thymeleaf使用目录结构：

使用方式

遇到问题

bug1

 

 

1. artTemplate

 

-中文文档：https://aui.github.io/art-template/zh-cn/docs/

1.1 快速入门

引入js：

定义模板：

 

 

使用模板：

 

 

1.2 语法

1.2.1 原始与标准

 

 

更推荐使用标准语法，更加简洁，但是原始语法逻辑更加明确

1.2.2 输出

不允许输出富文本：

<h1>{{ value }}</h1>

原文输出【允许输出富文本】：

<h1>{{@ value }}</h1>

 

1.2.3 条件

 

 

{{if flag == 0}}...{{ else if flag == -1 }}...{{ else }} ... {{ /if }}

 

 

1.2.3 循环

 

 

 

 

 

 

 

 

 

 

1.2.3 设置变量

 

 

 

 

1.2.4 模板继承

定义（layout.art）：

 

 

使用（index.art）：

 

 

 

1.2.5 子模板

 

 

1.2.6 过滤器

在上次做的django项目里自己曾写过一个过滤器

注册过滤器

template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};

template.defaults.imports.timestamp = function(value){return value * 1000};

 

过滤器函数第一个参数接受目标值。

标准语法

{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}

{{value | filter}} 过滤器语法类似管道操作符，它的上一个输出作为下一个输入。

 

1.2.7 调试

 

 

 

 

1.2.8 模板变量

模板变量：

 

 

导入变量

 

 

内置变量清单

 

 

1.2.9 压缩页面

开启：

template.defaults.minimize = true;

 

配置：

参见：https://github.com/kangax/html-minifier

 

默认配置：

 

 

1.2.10 API

§ template

函数：template(filename,content)

根据模板名渲染模板。

 参数：

 {string} filename

 {Object,string} content

 返回值：

 如果 content 为 Object，则渲染模板并返回 string

 如果 content 为 string，则编译模板并返回 function

 

var html = template('/welcome.art', {

    value: 'aui'

});

 

浏览器版本无法加载外部文件，filename 为存放模板的元素 id

 

 

 

 

§ complie

 

 

§ render

返回渲染的结果

 

§ helper

//时间戳转换
template.helper('dateFormat' , function (date, format) {
    date = new Date(date);
    var map = {
        "M": date.getMonth() + 1, //月份
        "d": date.getDate(), //日
        "h": date.getHours(), //小时
        "m": date.getMinutes(), //分
        "s": date.getSeconds(), //秒
        "q": Math.floor((date.getMonth() + 3) / 3), //季度
        "S": date.getMilliseconds() //毫秒
    };
    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
        var v = map[t];
        if (v !== undefined) {
            if (all.length > 1) {
                v = '0' + v;
                v = v.substr(v.length - 2);
            }
            return v;
        } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
        }
        return all;
    });
    return format;
};

 

以上是artTemplate4.0以上的写法，4.0以后不在使用template.helper而是使用：

//时间戳转换
template.defaults.imports.dateFormat = function (date, format) {
    date = new Date(date);
    var map = {
        "M": date.getMonth() + 1, //月份
        "d": date.getDate(), //日
        "h": date.getHours(), //小时
        "m": date.getMinutes(), //分
        "s": date.getSeconds(), //秒
        "q": Math.floor((date.getMonth() + 3) / 3), //季度
        "S": date.getMilliseconds() //毫秒
    };
    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
        var v = map[t];
        if (v !== undefined) {
            if (all.length > 1) {
                v = '0' + v;
                v = v.substr(v.length - 2);
            }
            return v;
        } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
        }
        return all;
    });
    return format;
};

 

在模板页面中使用：

 

 

 

 

 

2. thymeleaf

spring-boot 中thymeleaf使用目录结构：

 

 

使用方式

 

 

 

遇到问题

bug1

使用thymeleaf模板的html页面的js里不能正常使用for循环也不能使用$.each，解决方案：

/* <![CDATA[ */
     for(var i=1;i<3;i++){
      alert(i);
    }
 /* ]]> */