zoukankan      html  css  js  c++  java
  • 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>  
    
  • 相关阅读:
    用python40行代码编写的计算器
    用Python语言设计GUI界面
    win7下安装Linux实现双系统全攻略
    Dreamweaver_CS6安装与破解,手把手教程
    windows Server 2008各版本有何区别?
    如何查看路由器中的pppoe拨号密码?
    xp远程桌面连接最大用户数怎么设置?
    网站的盈利模式
    linux 下安装mysql-5.7.16
    BroadcastReceiver接收电量变化的广播-------在代码中动态创建接受者
  • 原文地址:https://www.cnblogs.com/shilin000/p/5132484.html
Copyright © 2011-2022 走看看