JS artTemplate模板引擎

原创 黄良钵  2017-08-21 18:39  阅读 20 次 评论 0 条

artTemplate下载:https://github.com/aui/art-template

artTemplate文档:https://aui.github.io/art-template/docs/

HTML模板引擎

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML模板引擎</title>
  6.     <style>
  7.       li span{
  8.           color: red;
  9.       }
  10.     </style>
  11. </head>
  12. <body>
  13.     <script src='template.js'></script>
  14.     <script>
  15.     // 辅助方法
  16.     template.helper('formData',function(time){
  17.         var y = time.getFullYear(),
  18.             m = time.getMonth(),
  19.             d = time.getDate()
  20.             m = m < 10 ?'0'+m:m
  21.             d = d < 10?'0'+d:d
  22.             return `${y} - ${m} - ${d}`
  23.     })
  24.     template.helper('money',function(price){
  25.         if(price == 0) return'免费'
  26.         return '¥' + price.toFixed(2)
  27.     })
  28.     </script>
  29.     <!--创建一个简单的模板
  30.     创建模板需要使用script 并且type需要设置为text/html
  31.     创建模板时 模板的script必须设置id 才能使用模板
  32.     -->
  33.     <script id="template" type="text/html">
  34.        <!--{{}}逻辑表达式 表示引用模板数据 或者是artTenplate语法关键字-->
  35.        {{if books.length < 1}}
  36.        <p>抱歉没有找到推荐书目</p>
  37.        {{else}}
  38.        <h1>{{title}}{{books.length}}本</h1>
  39.        <ul>
  40.            <!--each as遍历数组 b = value i = 索引-->
  41.            {{each books as b i}}
  42.            <li>
  43.                {{b.name}}
  44.                <del>{{b.markerPrice}}</del>
  45.                <span>{{b.price | money}}</span><br>
  46.                出版日期:{{b.pData | formData}}
  47.            </li>
  48.            {{/each}}
  49.        </ul>
  50.       {{/if}}
  51.     </script>
  52.     <script>
  53.        var data = {
  54.            title:'推荐书目',
  55.            books:[{
  56.                name:'JavaScript 权威指南',
  57.                markerPrice:111,
  58.                price:99.9,
  59.                pData:new Date(2017,8,21)
  60.            },{
  61.                name:'三国演义',
  62.                markerPrice:120,
  63.                price:98.9,
  64.                pData:new Date(2017,5,21)
  65.            },{
  66.                name:'大闹天空',
  67.                markerPrice:0,
  68.                price:100,
  69.                pData:new Date(2017,8,1)
  70.            }]
  71.        }
  72.     //    在使用模板时 需要用到一个函数template
  73.     //    第一个参数需要使用模板的id
  74.     //    第二个参数 套用模板的数据
  75.     //    返回值 数据 + 模板生成的html字符串 
  76.        var template = template('template',data)
  77.        document.body.innerHTML = template
  78.        console.log(template)
  79.     </script>
  80. </body>
  81. </html>

模板包含

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>模板包含</title>
  6. </head>
  7. <body>
  8.     <script src="template.js"></script>
  9.     <!--模板1-->
  10.     <script id="web" type="text/html">
  11.       <div>
  12.           <!--<a href="">ccccccc</a>-->
  13.           <a href="{{url}}">{{name}}</a>
  14.       </div>
  15.     </script>
  16.     <!--模板2-->
  17.     <script type="text/html" id="book">
  18.       <div>
  19.           <img width="300px" height="400px" src="{{img}}" alt="书籍封面">
  20.           <a href="{{url}}">{{name}}</a>
  21.       </div>
  22.     </script>
  23.     <script id="template" type="text/html">
  24.        <h1>{{title}}</h1>
  25.       {{each items as item}}
  26.       <!--一个模板中可以套用另一个模板 include
  27.       如果这个模板是一个固定模板 只写模板id即可 {{include '模板id'}}
  28.       如果这个模板是个需要数据的模板 那么就要传递数据对象{{include '模板id' item}}-->
  29.         {{if item.type == 'web'}}
  30.             {{include 'web' item}}
  31.          {{else}}
  32.            {{include 'book' item}}
  33.         {{/if}}
  34.       {{/each}}
  35.     </script>
  36.     <script>
  37.        var data = {
  38.            title:'建议浏览的网站和阅读书目',
  39.            items:[{
  40.                type:'web',
  41.                name:'MDN',
  42.                url:'https://developer.mozilla.org/zh-CN/'
  43.            },{
  44.                type:'book',
  45.                name:'从你的全世界路过',
  46.                url:'https://baike.baidu.com/item/%E4%BB%8E%E4%BD%A0%E7%9A%84%E5%85%A8%E4%B8%96%E7%95%8C%E8%B7%AF%E8%BF%87/16325805?fr=aladdin',
  47.                img:'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike220%2C5%2C5%2C220%2C73/sign=292d33ad52afa40f28cbc68fca0d682a/2f738bd4b31c8701fb5636792f7f9e2f0608ff49.jpg'
  48.            },{
  49.               type:'web',
  50.                name:'gitHub',
  51.                url:'https://github.com/' 
  52.            }]
  53.        }
  54.        document.body.innerHTML =  template('template',data)
  55.     </script>
  56. </body>
  57. </html>
本文地址:https://xn--nf1a578axkh.xn--fiqs8s/1029.html
关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情