• js 模板引擎 -Art Template


    一个例子涵盖所有:

        <!doctype html>  
        <html>  
        <head>  
            <meta charset="UTF-8">  
            <title>include demo</title>  
            <script src="template.js"></script>  
        </head>  
          
        <body>  
            <div id="content"></div>  
            <div id="tagcontent"></div>  
            <script id="targettemplate" type="text/html">  
                <h1><%=title%></h1>  
                <%include('list')%>   //嵌入子模板,id作为标识
                <%include('Tvalue')%>  
            </script>  
            <script id="list" type="text/html">  
                <ul>  
                    <%for(var i=0; i<listItems.length; i++){%>  
                        <li>条目内容<%=i+1%> : <%=listItems[i]%></li>  
                    <%}%>  
                </ul>       
            </script>  
            <script id="Tvalue" type="text/html">  
                <p>不转义:<%==trans%> or <%=#trans%></p>  
                <p>默认转义: <%=trans%></p>  
            </script>  
             
            <script>  
                var data = {  
                    title: '嵌入子模板',  
                    listItems: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'],  
                    trans:'<label style="color:#F00; font-weight:bold;">hello world!</label>'  
                };  
                var logintsorse='<h3>template.compile([id], source)将返回一个渲染函数。其中 id 参数是可选的,'  
                +'如果使用了 id 参数,可以使用template.render(id, data)渲染模板。</h3>'  
                +'使用arttemplate来编写:<%=title%>';  
                  
                var html = template.render('targettemplate', data);  
                  
                var render = template.compile(logintsorse);  //编译一段html代码成模板,render(data)把数据render进去
                var compilehtml = render(data);  
                  
                document.getElementById('content').innerHTML = html+compilehtml;          
            </script>  
              
            <script id="customTag" type="text/html">            
                <h1><!--[= header]--></h1>  
                <ul>  
                    <!--[for(var i=0; i<tag.length; i++){]-->  
                        <li>条目内容<!--[=i+1]--> : <!--[=tag[i]]--></li>  
                    <!--[}]-->  
                </ul>   
            </script>  
            <script>  
                template.openTag = '<!--[';  
                template.closeTag = ']-->';  
                var listdata = {  
                    header : 'your study list',  
                    tag : ['算法导论','linq','c#','jquery','django','python']  
                };  
                var resulthtml = template.render ('customTag', listdata);         
                document.getElementById('tagcontent').innerHTML = resulthtml;  
          
                //  
            </script>  
        </body>  
          
        </html>  
    
  • 相关阅读:
    『在线工具』 基于 xsser.me 源码 + BootStrap 前端 的 XSS 平台
    『Python』Python 调用 ZoomEye API 批量获取目标网站IP
    『Python』 多线程 共享变量的实现
    『Python』 多线程 端口扫描器
    打印机PCL漏洞原理分析
    『GitHub』Git常用命令记录
    『Python』爬行搜索引擎结果获得指定主机二级域名及IP信息
    iOS使用Runtime给分类动态绑定属性
    Swift介绍(基于Swift4版本)
    iOS中的block模板
  • 原文地址:https://www.cnblogs.com/shilin000/p/5132484.html
Copyright © 2020-2023  润新知