js模板引擎art-Template(以前的artTemplate)


使用js、jquery動態生成html會非常麻煩。現在的模板引擎可以很簡單的解決這個問題。比如騰訊出的art-Template

官網:http://aui.github.io/art-template/zh-cn/
下載:template-web.js(gzip: 6kb)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <!--用於展示模版的位置-->
    <div id="area"></div>

    <script src="http://aui.github.io/art-template/js/template-engines/template-web.js"></script>
    <!--用於存放模版-->
<script id="template" type="text/html">
    <div>
        <!--升級后:Template upgrade: {each object as value index} -> {each object value index} -->
        {{each content value }}
            <h1>{{ value.province }}</h1>
            {{each value.city city }}
            <p>{{city}}</p>
            {{/each }}
        {{/each }}
        </div>
    </script>
    <!--用於渲染模版-->
    <script>
        var data = {
            content: [
                { province: '四川', city: ['成都', '綿陽', '自貢'] },
                { province: '廣東', city: ['廣州', '東莞', '佛山'] },
                { province: '海南', city: ['海口', '三亞'] }
            ]
        };
        var html = template('template', data);
        document.getElementById('area').innerHTML = html;
    </script>
</body>
</html>

參考:https://www.awesomes.cn/repo/aui/arttemplate


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM