安裝：
方式1：artTemplate模板源碼下載地址：https://aui.github.io/art-template/zh-cn/index.html
方式2：使用node.js進行安裝：npm install art-template --save -dev
文檔：
artTemplate 中文API文檔地址：https://aui.github.io/art-template/zh-cn/docs/syntax.html#%E8%BF%87%E6%BB%A4%E5%99%A8
問：為什么要使用artTemplate模板？不是有django模板嗎？
答：為了實現動態加載，因為有時候不想刷新整個頁面，只在局部增加內容，則需要使用 artTemplate 模板 與 ajax 配合了
使用：介紹模板使用 與 自定義過濾器，其他參考 官方API文檔
一、art-Template在Django模板中的簡單使用：
1. 前端html代碼
<!-- verbatim：為了解決django模板與art模板的沖突Django不會渲染 {% verbatim %}{% endverbatim %} 標簽包裹的內容，
如果不使用改標簽則會發生錯誤：django無法解析模板--> <scripts type="text/html" id="test-item" > {% verbatim %} <!-- each是循環變量：遍歷對象，遍歷的值，遍歷的下標 --> {{each target value index}}
<li>
<!-- 可以在取值的時候增加前綴：$ --> <!--<p>{{$index}} | {{$value}} |{{value.name}} -->
<!-- 可以通過 value.key 的方式得到對象中的值 -->
<p>索引：{{index}} | 姓名：{{value.username}} | 年齡：{{value.age}} | 愛好：{{value.hobby.bobby1}}</p>
</li> {{/each}} {% endverbatim %} </script>
<body>
<ul id="test-artTemplate>
<li>這是初始的li標簽</li>
</ul>
<!-- 點擊按鈕增加一個li標簽 -->
<button id="add-li-btn">增加li標簽</button>
</body>
2. js代碼：
// 導入 jquery $(function(){
// 為 id 為 "add-li-btn" 的按鈕注冊 點擊 事件 $("add-li-btn").click(function(){
// 制作一個 data 數據
var data = [
{'username':'ljx','age':20,'hobby':['hobby1','hobby2','hobby3']},
{{'username':'lxl','age':40,'hobby':['hobby1','hobby2','hobby3']
}]
// 渲染 id 為 test-item 的 artTemplate 模板：Template('id',{'對象名':'數據'})
// 對象名要與模板中定義的一致
var addli_html = Template('test-item',{'target':data});
$(test-artTemplate).append(addli_html) // 將渲染的模板代碼追加到 id 為 test-artTemplate 的元素中
});
});
輸出結果：
<ul>
<li>這是初始的li標簽</li>
<li>索引：0, | 姓名：ljx | 年齡：20 | 愛好：bobby1</li>
<li>索引：1, | 姓名：lxl | 年齡：40 | 愛好：bobby1</li>
</ul>
二、art-template 中的過濾器：
1. 注冊過濾器：
<script type="text/JavaScript">
// data：接收一個值，然后在過濾器中進行處理后返回一個值 template.defaults.imports.過濾器名稱 = function(data){ 過濾器的內容 一定要注意 需要一個返回值 }; </script>
2. 使用案例
js代碼：
<script type="text/JavaScript">
// 注冊一個名為：time_filter 的過濾器
$(function(){
template.defaults.imports.Multiplying_filter = function(index){
return index * 10
}
});
$(function(){
var add_html = Template('test-item',{'target':{'index',10}});
$("test-template-filter").append(add_html);
});
</script>
html代碼：
<body>
<script type="text/html" id="test-item">
// 將 {{index}} 這個值傳給過濾器：Multiplying_filter ，進行處理之后返回一個新的值
<p>{{index}} * 10的結果是：{{index|Multiplying_filter}}</p>
</script>
<div id="test-template-filter">
</div>
</body>
輸出結果：10 * 10的結果是：100
When you want to grow up, you will always arrange some people or things that irritate you.
命運要你成長的時候，總會安排一些讓你不順心的人或事刺激你