artTemplate使用

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/

 

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