溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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">
<h2>{{title}}</h2>
</script>三、向模板插入數據，并輸出到頁面
var data = {
title:"hello world"
};
var html = template("test",data);
document.getElementById('content').innerHTML = html;輸出HTML
<script id="test" type="text/html">
<h2>{{title}}</h2>
</script>//注意：{{title}}這是對內容編碼輸出，應該寫成{{#title}}這是對內容不編碼輸出
<script id="test" type="text/html">
<h2>{{#title}}</h2>
</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}}
<h2>線上</h2>
{{else if bok==33}}
<h3>隱藏</h3>
{{else}}
<h4>走這里</h4>
{{/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常用操作有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
