Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

artTemplate在在官网中的应用 #44

Open
ahua52 opened this issue Jul 14, 2016 · 0 comments
Open

artTemplate在在官网中的应用 #44

ahua52 opened this issue Jul 14, 2016 · 0 comments

Comments

@ahua52
Copy link

ahua52 commented Jul 14, 2016

关于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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant