Js 之art-template模板引擎

一、文档

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>

三、子模板传参

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

    <script id="tpl2" type="text/html">
        {{each $data}}
        <div>{{$value.name}}</div>
        {{/each}}
    </script>
</div>
<script src="./js/template-web.js"></script>
<script>

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

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

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

 

posted @ 2023-04-08 14:29  样子2018  阅读(49)  评论(0)  编辑  收藏  举报