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

2020-11-27 来源：华佗小知识

本篇文章给大家带来的内容是关于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>

显示全文

全部频道

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