js模板引擎art-template用法

art-template

javascript 模板引擎，官网：https://github.com/aui/art-template

分为原生语法和简洁语法，本文主要是讲简洁语法

• 基础数据渲染
• 输出HTML
• 流程控制
• 遍历
• 调用自定义函数方法
• 子模板引入

基础数据渲染

一、引入art-template.js文件

二、编写HTML模板

三、向模板插入数据，并输出到页面

var data = {
    title:"hello world"
};
var html = template("test",data);
document.getElementById('content').innerHTML = html;

输出HTML

//注意：{{title}}这是对内容编码输出，应该写成{{#title}}这是对内容不编码输出

var data = {
    title:"
hello world
"
};
var html = template("test",data);
document.getElementById('content').innerHTML = html;

流程控制语句（if else）

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

嵌套写法

循环遍历语句

{{each name}}
索引：{{$index}}
值：{{$value}}
{{/each}}

调用自定义方法

        $.get("https://share.nf.com/api/data/student/v1/summary/list/share/topic/id/" +  params, function (res) {
            if (res.code === 200&& res.data) {
           
            }

        

            template.defaults.imports.formatDay = function(timestamp){
                var date = new Date(timestamp);
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                const day = date.getDate();
                return year + '.' + (String(month).length > 1 ? month : '0' + month) + '.' + (String(day).length > 1 ? day : '0' + day)
            }

            var html = template("test", data);
            document.getElementById("content").innerHTML = html;
        })

使用

 {{formatDay($value.updatedTime)}}

v

调用子模板

{{include 'main'}} 引入子模板，数据默认为共享
{{include 'main' a}} a为制定数据，但是同样必须是父级数据，可以看看下面的例子，如果不注入的a的话，引入的子模板是接受不到数据的