- <section data-am-widget="accordion" class="am-accordion am-accordion-default">
- <!-- 这里面还有代码,本例的大概意思就是不写JS代码,直接调用Web组件。 -->
- </section>
示例 02.Web 组件 - 通过模板来调用 - 示例 1 (请下载附件查看示例)
- <!-- handlebars.js 是一个开源的js库,用于在网页上实现语义模板。 -->
- <script src="assets/js/handlebars.min.js">
- </script>
- <!-- 妹子UI调用 handlebars 的辅助类 -->
- <script src="assets/js/amazeui.widgets.helper.js">
- </script>
示例中关键代码 2(定义一个模板)(话说这个模板也没啥实际意义,但官方的 demo 就是这么写的,我只是移植了一下):
- <script type="text/x-handlebars-template" id="my-tpl">
- {
- { > accordion accordionData
- }
- }
- </script>
示例中关键代码 3(调用 JS 代码使其工作):
- var $tpl = $('#my-tpl'); //得到原始模板
- var template = Handlebars.compile($tpl.text()),
- //得到编译后的模板
- //...这里定义了数据...代码较多...略...
- var html = template(data); //传入数据,运行模板,得到结果
- var $tpl.before(html); //显示结果
- var template = Handlebars.compile('{{>accordion}}'),
- //得到编译后的模板 (字符串就算是原始模板了)
- var html = template(data.accordionData); //传入数据,运行模板,得到结果
- $("#div1").before(html); //显示结果
- <!-- 自定义原始模板 -->
- <script type="text/x-handlebars-template" id="demo-template">
- //这里还有很多代码,因为不关键就省略了...
- < !--关键代码:添加图标icon属性-->{
- {#
- if icon
- }
- } < img src = "{{icon}}"style = "width:20px;" / >{
- { /
- if
- }
- }
- //这里还有很多代码,因为不关键就省略了...
- </script>
示例中关键代码 3(调用 JS 使其工作):
- var demoData = { //定义数据
- "content": [..省略.., {
- "title": "标题二",
- "content": "内容二",
- "icon": "assets/i/favicon.png" //关键:多出一个icon属性
- },
- ..省略..]
- };
- var demoTemplate = Handlebars.compile($("#demo-template").html()); //得到编译后的模板
- var demoHtml = demoTemplate(demoData); //传入数据,运行模板,得到结果
- $("#div1").html(demoHtml); //显示结果
- //注册一个新组件,名叫:hr-accordion
- hbs.registerPartial('hr-accordion', '\
- {{#this}}\
- <section data-am-widget="accordion" class="am-accordion {{#if theme}}am-accordion-{{theme}}{{else}}am-accordion-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}" {{#if id}} id="{{id}}" {{/if}} data-am-accordion=\'{ {{#if options.multiple}}"multiple": true{{/if}} }\'>\
- {{#each content}}\
- <dl class="am-accordion-item{{#if active}} am-active{{/if}}{{#if disabled}} am-disabled{{/if}}">\
- <dt class="am-accordion-title" style="color:#0094ff;">\
- <!-- 添加图标的关键代码 -->\
- {{#if icon}}<img src="{{icon}}" style="width:20px;" />{{/if}}\
- {{{title}}}\
- </dt>\
- <dd class="am-accordion-bd am-collapse {{#if active}}am-in{{/if}}">\
- <div class="am-accordion-content">\
- {{{content}}}\
- </div>\
- </dd>\
- </dl>\
- {{/each}}\
- </section>\
- {{/this}}');
示例中关键代码 2(引用相关 js 文件):
- <!-- handlebars.js 是一个开源的js库,用于在网页上实现语义模板。 -->
- <script src="assets/js/handlebars.min.js">
- </script>
- <!-- 华瑞手风琴组件,调用 handlebars.js 的辅助类 -->
- <script src="assets/js/huarui.accordion.helper.js">
- </script>
示例中关键代码 3(调用 JS 使其工作):
- var demoData = { //定义数据
- "content": [..略.., {
- "title": "标题二",
- "content": "内容二",
- "icon": "assets/i/favicon.png" //关键:多出一个icon属性
- },
- ..略..]
- };
- //得到编译后的模板,传入数据,运行模板,得到结果
- var demoHtml = Handlebars.compile('{{>hr-accordion}}')(demoData);
- $("#div1").html(demoHtml); //显示结果
来源: http://www.cnblogs.com/zhouyou96/p/7258995.html