art-template是一款較通用的前端模板引擎。

簡單的使用方法如下：

具備3個要素

1）模板

    <script type="text/template" id="tpl">
        <p>我是一頭{{animal}}</p>
    </script>

2）引入插件

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

3）調用插件

var html = template(‘tpl‘, {animal:"老虎" });
console.log(html)；

------------------------------------------------------------------------------------------------------

關於在模板中填充數據註意點：

這個地方有一點需要註意：如果傳入給template第二個參數的是一個沒有次級對象的單層級對象,模板中只要包含屬性名就好, 如

{animal："老虎"} => {{animal}}

{animals：{"cat":"老虎"， "dog":"獅子"}} => {{animals.cat}} | {{animals.dog}}

------------------------------------------------------------------------------------------------------

集中基礎簡單的應用：

• 循環

模板中的寫法：

{{each target}}
    {{$index}} {{$value}}
{{/each}}

傳入template的數據的格式

{"target":["aaa","bbb","ccc"]}
或
{"target":{a:"aaa",v:"bbb",c:"ccc"}

• 條件

模板中的寫法：

{{if age == "21"}}
   ....
{{else if age == "23"}}
    ....
{{/if}}

傳入template的數據的格式

{"age":"23"}

• 原文輸入（即不將 < > / 等符號進行轉碼輸出）

{{@ data }}

詳細信息可看art-template官網 http://aui.github.io/art-template/zh-cn/

art-template簡單使用