artTemplate在在官网中的应用

[ahua52]

关于artTemplate的详细语法，请参考https://github.com/aui/artTemplate
下面详细介绍，artTemplate在官网项目中的一种用法。

引入artTemplate.js

//require引入artTemplate.js

require(['../lib/artTemplate'], function (template) {}

新增template模板，并引入

假设文件取名textTemplate.html

require(['../lib/artTemplate'，'text!../textTemplate.html'], function (template，textTemplate) {}

require引入artTemplate.js

textTemplate.html文件为modal与html的组合。例如

{{each list as value i}}
        <li>
            <div class="templateListMain">
                <div class="templateLisHead">
                    <h4 class="templateListTitle">
                        <a href="#">{{value.title}}</a>
                    </h4>
                </div>
                <div class="templateInfo clearfix">
                    <div class="templateInfoBox">
                        <ul class="templateInfoList">
                            <li class="left">模板编号：</li>
                            <li class="right">{{value.id}}</li>
                        </ul>
                    </div>
                </div>
                <div class="templateSpeInfo clearfix">
                    <span>{{value.decription}}</span>
                </div>
            </div>
        </div>
    </li>
{{/each}}

each循环变量list，value为每次循环的当前数据。list数据的来源后面做介绍

编译template模板

/**
 * 利用templat compile机制编译模板 并且插入参数{list:domList},list为数据别名，供   textTemplate.html 用
 * @domList 数据源
 * #templateContainer为页面的某个dom容器
 */
function initPate(){
    ar domList = [
            {
                'title': '金融理财模板',
                "id": "0004",
                'decription': '深耕银行、券商等金融机构的高净值客户，致力于打造专业的媒体管理模板',
                'content_img': "img/main_6.png",
                'phone_img': "img/phone_3.jpg",
                'url': 'http://design.yyuap.com/ficloud/home/statistics',
                "using_times": "228",
                "for_area": ["互联网",'金融']
            },{
                'title': '运维管理模板',
                "id": "005",
                'decription': '发展可持续、完善易有序、拓展能稳定',
                'content_img': "img/main_5.png",
                'phone_img': "img/phone_3.jpg",
                'url': '../../website/tenxcloud/index.html',
                "using_times": "228",
                "for_area": ["互联网",'金融']
            }
    ]
    var render = template.compile(textTemplate);
    var html = render({
        list: domList··
    });
    document.getElementById('templateContainer').innerHTML = html;
}