bower install artTemplate --save

https://github.com/aui/artTemplate

快速上手

模板定義：

?

<div id="content"></div>

<script id="test" type="text/html">
??? {{if isAdmin}}
??????? <h1>{{title}}</h1>
??????? <ul>
??????????? {{each list as value i}}
??????????????? <li>索引 {{i + 1}} ：{{value}}</li>
??????????? {{/each}}
??????? </ul>
??? {{/if}}
</script>

?

function(item,index)

數據綁定

<script src="../dist/template.js"></script> <script>
var data = {
title: '基本例子',
isAdmin: true,
list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>

?

語法說明

1. 版本

有兩個版本的模板語法可以選擇

簡潔語法

推薦使用，語法簡單實用，利于讀寫，使用template.js。

{{if admin}}
{{include 'admin_content'}}
{{each list}}
<div>{{$index}}. {{$value.user}}</div>
{{/each}}
{{/if}}

?

原生語法

使用template-navative.js

?

<%if (admin){%>
<%include('admin_content')%>
<%for (var i=0;i<list.length;i++) {%>
<div><%=i%>. <%=list[i].user%></div>
<%}%>
<%}%>

2. 顯示屬性

<h3> <span class=”{{title}}”></span></h3>

#代表屬性不轉義，會按照原始串輸出，如果是標簽會被解析成dom

<h3>{{#title}}</h3>

3. 判斷

{{if isAdmin}}
<h1>{{title}}</h1>
{{/if}} {{if isAdmin}}
<h1>{{title}}</h1>
{{else}}
<div>{{message}}</div>
{{/if}} {{if type==1}}
<h1>{{title}}</h1>
{{/if}}

4. 循環

{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}} {{each list}}
<li>索引 {{$index}} ：{{$value}}</li> {{include ‘test’ }}
{{/each}} {{each data}}
<tr>
<td >{{$value.agent_name}}</td>
<td >{{$value.agent_id}}</td>
<td >{{$value.type}}</td>
<td >
{{each $value.items}}
<span>{{$value}}</span>
{{/each}}
<td>
<tr>
{{/each}}

5. 引入

引入id為list的模板

{{include 'list'}}

模板定義

6. 使用type=“text/html”的script標簽

<script id="list" type="text/html">
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
</script>

7. 使用js的變量存儲模板

var source = '<ul>'
+??? '{{each list as value i}}'
+??????? '<li>索引 {{i + 1}} ：{{value}}</li>'
+??? '{{/each}}'
+ '</ul>'; var source = '\
??????? <ul>\
????????? {{each list as value i}}\
??????????? <li>索引 {{i + 1}} ：{{value}}</li>\
????????? {{/each}}\
??????? </ul>\
??????? ';

方法

注意：各個方法傳遞的數據必須是具有屬性的對象,不能是數組

{data:{}} 或者{data:[]}

8. template(id, data)

根據 id 渲染模板。內部會根據document.getElementById(id)查找模板。

如果沒有 data 參數，那么將返回一渲染函數。

<ul id="list"></ul>
<script id="list-temp" type="text/html">
{{each list}}
<li>
<img src="{{$value.img}}" alt="">
<h3>{{$value.title}}</h3>
<p>{{$value.time}}</p>
</li>
{{/each}}
</script> <script>
var data={
list:[
{img:'1.jpg',title:'javascript',time:'2014-11-01'},
{img:'2.jpg',title:'css3',time:'2015-11-01'},
{img:'3.jpg',title:'html5',time:'2016-11-01'}
]
}
document.querySelector('#list').innerHTML=template('list-temp',data);
</script>

9. template.compile(source)

template.compile()接收模板字符串，會返回一個函數，使用該函數傳入數據構建html

<ul id="list"></ul>
<script>
var source='\
???????????? {{each list}}\
??????????? <li>\
??????????? <img src="{{$value.img}}" alt="">\
??????????? <h3>{{$value.title}}</h3>\
??????????? <p>{{$value.time}}</p>\
??????????? </li>\
??????????? {{/each}}\
??????????? ';
var data={
list:[
{img:'1.jpg',title:'javascript',time:'2014-11-01'},
{img:'2.jpg',title:'css3',time:'2015-11-01'},
{img:'3.jpg',title:'html5',time:'2016-11-01'}
]
}
var render = template.compile(source);//返回一個函數
var html = render(data); //var html= template.compile(source)(data);
document.querySelector('#list').innerHTML=html;
</script>

10.???? template.helper(name, callback)

添加輔助方法。

<ul id="list"></ul>
<script id="list-temp" type="text/html">
{{each list}}
<li>
<p>{{$value.state | state}}</p>
<h3>{{$value.title}}</h3>
<p>{{$value.remark | subStr:15}}</p>
</li>
{{/each}}
</script>

?

<script>
template.helper('state',function (value) {
if(value==0){
return '禁用'
}else{
return '啟用'
}
})
template.helper('subStr',function (value,num) {
return value.substr(0,num)+'...';
})
</script>

?

<script>
var data={
list:[
{state:'1',title:'javascript',remark:'artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能極限'},
{state:'1',title:'css3',remark:'在 chrome 下渲染效率測試中分別是知名引擎 Mustache 與 micro tmpl 的 25 、 32 倍（性能測試）'},
{state:'0',title:'html5',remark:'另外，artTemplate 的模板還支持使用自動化工具預編譯，這一切都在 2KB(Gzip) 中實現'}
]
}
document.querySelector('#list').innerHTML=template('list-temp',data);
</script>

handerbar

http://handlebarsjs.com/

https://github.com/wycats/handlebars.js/

?

這種方式的的缺點是，模板通過字符串拼接，不好維護，適合簡單模板。

轉載于:https://www.cnblogs.com/xiangqianjin/p/6600674.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的artTemplate使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。