526互联

Js 之art-template模板引擎

发布时间 2023-04-08 14:34:22作者: 样子2018

一、文档

http://aui.github.io/art-template/zh-cn/

二、示例代码

<html>
<head>
    <title>art-template模板引擎</title>
</head>
<body>
<div>
    <div id="span">
        <div id="tpl1">
            <span>
            {{value}}
            {{$imports.test(1)}}
            </span>
        </div>
    </div>

    <div id="list">
        <div id="tpl2">
            {{each list}}
            <div>{{$value.name}}</div>
            {{/each}}
        </div>
    </div>

    <div id="test">
        <div id="tpl3">
            {{each list2}}
            <div>
                {{$value.name}}
            </div>
            {{/each}}
        </div>
    </div>
</div>
<script src="./js/template-web.js"></script>
<script>

    //自定义函数
    template.defaults.imports.test = function (data) {
        return 'ok - ' + data;
    };

    html = template("tpl1", {value: 123});
    document.getElementById("span").innerHTML = html;

    html = template("tpl2", {list: [{name: "test1"}, {name: "test2"}, {name: "test3"}]});
    document.getElementById("list").innerHTML = html;

    html = template("tpl3", {list2: [{name: "test1"}, {name: "test2"}, {name: "test3"}]});
    document.getElementById("test").innerHTML = html;

</script>
</body>
</html>