javascript的模板引擎art-template常用操作介绍

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于javascript的模板引擎art-template常用操作介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

art-template
javascript 模板引擎,官网:https://github.com/aui/art-template

分为原生语法和简洁语法,本文主要是讲简洁语法

基础数据渲染
输出HTML
流程控制
遍历
调用自定义函数方法
子模板引入
基础数据渲染
一、引入art-template.js文件

<script src="template-debug.js"></script>

二、编写HTML模板

<script id="test" type="text/html">     <h1>{{title}}</h1> </script>

三、向模板插入数据,并输出到页面

var data = {     title:"hello world" }; var html = template("test",data); document.getElementById('content').innerHTML = html;

输出HTML

<script id="test" type="text/html">     <h1>{{title}}</h1> </script>

//注意:{{title}}这是对内容编码输出,应该写成{{#title}}这是对内容不编码输出

<script id="test" type="text/html">     <h1>{{#title}}</h1> </script>  var data = {     title:"<p>hello world</p>" }; var html = template("test",data); document.getElementById('content').innerHTML = html;

流程控制语句(if else)

{{if value}} ... {{else if value}} ... {{else}} ... {{/if}}

art-template里面的流程控制就相对其他模板来说强大很多了,直接看例子吧

<script id="test" type="text/html">     <div>         {{if bok==22}}         <h1>线上</h1>         {{else if bok==33}}         <h2>隐藏</h2>         {{else}}         <h3>走这里</h3>         {{/if}}     </div> </script> <script>     var data = {         "bok":22     };     var html = template('test',data);     document.getElementById("app").innerHTML = html; </script>

嵌套的写法

<script id="test" type="text/html">     <div>         {{if bok}}             {{if list.length>=0}}                 {{each list}}                     <p>{{$index}}:{{$value}}</p>                 {{/each}}             {{else}}                 <p>没有数据</p>             {{/if}}         {{/if}}     </div> </script> <script>     var data = {         "bok":true,         list:["a","b","c"]     };     var html = template('test',data);     document.getElementById("app").innerHTML = html; </script>

循环遍历语句

{{each name}} 索引:{{$index}} 值:{{$value}} {{/each}}
 <script id="test" type="text/html"> <div>     <ul>         {{if c==100}}             <ul>                 {{each person}}                     <li>                         编号:{{$index+1}}--姓名:{{$value.name}}--年龄:{{$value.age}}                     </li>                 {{/each}}             </ul>         {{/if}}     </ul> </div> </script>  <script>     var data = {         c:100,         person:[             {name:"jack",age:18},             {name:"tom",age:19},             {name:"jerry",age:20},             {name:"kid",age:21},             {name:"jade",age:22}         ]     };     var html = template("test",data);     document.getElementById("content").innerHTML = html; </script>

调用自定义方法
通过template.helper(name,fnCallBack)注册方法
可以直接在{{}}中调用

<script id="test" type="text/html"> <div>     {{if c==100}}         <ul>             {{each person}}                 <li>姓名:{{$value.name}}--性别:{{show($value.sex)}}</li>             {{/each}}         </ul>      {{/if}} </div> </script> <script>     var data = {         c:100,         person:[             {name:"jack",age:18,sex:1},             {name:"tom",age:19,sex:0},             {name:"jerry",age:20,sex:0},             {name:"kid",age:21,sex:1},             {name:"jade",age:22,sex:0}         ]     };     //自定义函数     template.helper("show",function(sex){         console.log(sex);//同样可以打印日志到控制台         if(sex==0){             return "男"         }else if(sex==1){             return "女"         }     });     var html = template("test",data);     document.getElementById("app").innerHTML = html; </script>

调用子模板

{{include ‘main’}} 引入子模板,数据默认为共享
{{include ‘main’ a}} a为制定数据,但是同样必须是父级数据,可以看看下面的例子,如果不注入的a的话,引入的子模板是接受不到数据的

<body> <div id="app"></div> <script src="template-debug.js"></script> <script id="main" type="text/html">     <ul>        {{each list}}             <li>{{$value}}</li>         {{/each}}     </ul> </script> <script id="test" type="text/html">     <div>         <ul>             {{each person}}                 <li>{{$value.name}}</li>             {{/each}}         </ul>         {{include 'main' a}}     </div> </script> <script>     var data = {         person:[             {name:"jack",age:18},             {name:"tom",age:19},             {name:"jerry",age:20},             {name:"kid",age:21},             {name:"jade",age:22}         ],         a:{             list:['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']         }     };     var html = template("test",data);     document.getElementById("app").innerHTML=html; </script> </body>
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » javascript的模板引擎art-template常用操作介绍

发表评论

提供最优质的资源集合

立即查看 了解详情