JS模板引擎-腾讯artTemplate 简洁语法例子

最新推荐文章于 2023-05-10 15:24:27 发布

转载最新推荐文章于 2023-05-10 15:24:27 发布 · 83 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/mic326/blog/751166

文章标签：

#javascript #ViewUI

本文详细介绍了ArtTemplate模板引擎的基本用法，包括条件判断、循环遍历、模板编译、子模板引用及辅助方法的使用，通过实例展示了如何在HTML中嵌入动态数据。

参考：https://github.com/aui/artTemplate

下载后其中自带有例子；下面是自己参照写的。

<!DOCTYPE HTML >  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>Index</title>  
        <script src="dist/template.js"></script>  
    </head>  
    <body>  
        <div id="content"></div>  
        <script id="test" type="text/html">  
            {{if isAdmin}}  
                <h1>{{title}}</h1>  
                <ul>  
                    {{each list as value index}}  
                        <li>索引：{{index}}:{{value}}</li>  
                    {{/each}}  
                </ul>  
            {{/if}}  
        </script>  
        <script>  
            var data = {  
                title : 'HELLO WORLD',  
                isAdmin : true,  
                list : ['新闻','军事','历史','政治']  
            };  
            var html = template('test', data);  
            document.getElementById("content").innerHTML = html;  
        </script>  
        <hr/>no-escape 不转义HTML  
        <div id="div_noescape"></div>  
        <script id="no_escape" type="text/html">  
            <p>不转义：{{#text}}</p>  
            <p>默认转义： {{text}}</p>  
        </script>  
        <script>  
            var data_noEscape = {  
                text: '<span style="color:#F00">hello world!</span>'  
            };  
            var html_noescape = template("no_escape", data_noEscape);  
            document.getElementById("div_noescape").innerHTML = html_noescape;  
        </script>  
        <hr/> 在javascript中存放模板  
        <div id="div_complie"></div>  
        <script>  
            var source = '<ur>' +  
                '{{each list}}'+  
                    '<li>索引：{{$index+1}}:{{$value}}</li>'+  
                '{{/each}}'+  
            '</ul>';  
            var data = {  
                list : ['电影','电视剧','综艺','音乐']  
            };  
            var render = template.compile(source);  
            var html = render(data);  
            document.getElementById("div_complie").innerHTML = html;  
        </script>  
        <hr/> 嵌入子模板(include)  
        <div id="div_include"></div>  
        <script id="include" type="text/html">  
            {{include 'test'}}            
        </script>  
        <script>  
            document.getElementById("div_include").innerHTML = html;  
        </script>  
        <hr/>辅助方法  
        <script id="helper" type="text/html">  
            {{time | xx:'yyyy年 MM月 dd日 hh:mm:ss'}}  
        </script>  
        <div id="div_helper"></div>  
        <script>  
            /**   
             * 对日期进行格式化，  
             * @param date 要格式化的日期  
             * @param format 进行格式化的模式字符串  
             *     支持的模式字母有：  
             *     y:年,  
             *     M:年中的月份(1-12),  
             *     d:月份中的天(1-31),  
             *     h:小时(0-23),  
             *     m:分(0-59),  
             *     s:秒(0-59),  
             *     S:毫秒(0-999),  
             *     q:季度(1-4)  
             * @return String  
             */  
            function dateFormat(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;  
            }  
            var data = {  
                time: 1408536771253,  
            };  
            template.helper("xx", dateFormat);  
            var html = template('helper', data);  
            document.getElementById('div_helper').innerHTML = html;  
//          document.getElementById("div_helper").innerHTML = dateFormat(new Date());  
        </script>  
    </body>  
</html>

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Index</title>
        <script src="dist/template.js">
        </script>
    </head>
    <body>
    <div id="content">
    </div>
    <script id="test" type="text/html">
        {{xx(n)}}
    </script>
    <script>
        template.helper("xx", function(a){
            return 10 + "--" + a;
        });
        var data = {
            n: 123
        };
        var html = template("test", data);
        document.getElementById("content").innerHTML = html;
    </script>
    </div>
</body>
</html>

转载于:https://my.oschina.net/mic326/blog/751166