• 当前标签:模板引擎

程序开发 JS artTemplate模板引擎

artTemplate下载:https://github.com/aui/art-template artTemplate文档:https://aui.github.io/art-template/docs/ HTML模板引擎 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>HTML模板引擎</title>     <style>       li span{           color: red;       }     </style> </head> <body>     <script src='template.js'></script>     <script>     // 辅助方法     template.helper('formData',function(time){         var y = time.getFullYear(),             m = time.getMonth(),             d = time.getDate()             m = m < 10 ?'0'+m:m             d = d < 10?'0'+d:d             return `${y} - ${m} - ${d}`     })     template.helper('money',function(price){         if(price == 0) return'免费'         return '¥' + price.toFixed(2)     })     </script>     <!--创建一个简单的模板     创建模板需要使用script 并且type需要设置为text/html     创建模板时 模板的script必须设置id 才能使用模板     -->     <script id="template" type="text/html">        <!--{{}}逻辑表达式 表示引用模板数据 或者是artTenplate语法关键字-->        {{if books.length < 1}}        <p>抱歉没有找到推荐书目</p>        {{else}}        <h1>{{title}}{{books.length}}本</h1>        <ul>            <!--each as遍历数组 b = value i = 索引-->            {{each books as b i}}            <li>                {{b.name}}                <del>{{b.markerPrice}}</del>                <span>{{b.price | money}}</span><br>                出版日期:{{b.pData | formData}}            </li>            {{/each}}        </ul>       {{/if}}     </script>     <script>        var data = {            title:'推荐书目',            books:[{                name:'JavaScript 权威指南',                markerPrice:111,                price:99.9,                pData:new Date(2017,8,21)            },{                name:'三国演义',                markerPrice:120,                price:98.9,                pData:new Date(2017,5,21)            },{                name:'大闹天空',                markerPrice:0,                price:100,                pData:new Date(2017,8,1)            }]        }     //    在使用模板时 需要用到一个函数template     //    第一个参数需要使用模板的id     //    第二个参数 套用模板的数据     //    返回值 数据 + 模板生成的html字符串         var template = template('template',data)        document.body.innerHTML = template        console.log(template)     </script> </body> </html> 模板包含 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>模板包含</title> </head> <body>     <script src="template.js"></script>     <!--模板1-->     <script id="web" type="text/html">       <div>           <!--<a href="">ccccccc</a>-->           <a href="{{url}}">{{name}}</a>       </div>     </script>     <!--模板2-->     <script type="text/html" id="book">       <div>           <img width="300px" height="400px" src="{{img}}" alt="书籍封面">           <a href="{{url}}">{{name}}</a>       </div>     </script>     <script id="template" type="text/html">        <h1>{{title}}</h1>       {{each items as item}}       <!--一个模板中可以套用另一个模板 include       如果这个模板是一个固定模板 只写模板id即可 {{include '模板id'}}       如果这个模板是个需要数据的模板 那么就要传递数据对象{{include '模板id' item}}-->         {{if item.type == 'web'}}             {{include 'web' item}}          {{else}}            {{include 'book' item}}         {{/if}}       {{/each}}     </script>     <script>        var data = {            title:'建议浏览的网站和阅读书目',            items:[{                type:'web',                name:'MDN',                url:'https://developer.mozilla.org/zh-CN/'            },{                type:'book',                name:'从你的全世界路过',                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',                img:'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike220%2C5%2C5%2C220%2C73/sign=292d33ad52afa40f28cbc68fca0d682a/2f738bd4b31c8701fb5636792f7f9e2f0608ff49.jpg'            },{               type:'web',                name:'gitHub',                url:'https://github.com/'             }]        }        document.body.innerHTML =  template('template',data)     </script> </body> </html>

2017-08-21 18:39:57 40 0 0
阅读详情
  • 1
前往