#5 自定义组件根元素
2017-07-10 22:03
295 查看
英文原版:https://guides.emberjs.com/v2.14.0/components/customizing-a-components-element/
默认的,每一个组件都被一个<div>元素包裹。如果你通过浏览器的带的开发工具来观察一下DOM结构的话,你会发现你的每个组件渲染后的DOM最外层元素都如下面这样:
你可以自定义需要哪种元素来包裹你的组件,同时也可以定义需要这个元素带有哪些class类和属性。
你同样也可以在组件类中通过className属性来给组件指定class类,该属性是一个字符串数组,所以可以同时指定多个class:
另外,如果你想通过属性来设置class,你可以通过类名绑定来实现。假如你将class与一个boolean属性绑定。那么这个boolean属性的真或假就决定了是否要应用这个class类:
上面的组件将会得到下面的结果:
如果isUrgent属性变成false,那么is-urgent类就会被去掉。
默认的,boolean属性应用于class类名时通过”-“号连接不同单词。另一个方式,通过冒号”:”来指定你所需要的class类名:
这样的话,会得到如下的结果:
除了当属性为true时应用class之外,你还可以在属性为false的时候添加class类:
这样将会得到下面的渲染结果:
你同样可以指定当属性为false时添加某class类:
渲染效果如下:
反之,如果isEnabled为true:
如果被绑定的属性值是一个字符串,那么字符串的值就是class的类名:
渲染结果如下:
你可以给这些属性绑定花名:
如果被绑定的属性为null,那么它不会被渲染:
当title为null时:
当title有值,且为”Ember JS”时:
本节完
默认的,每一个组件都被一个<div>元素包裹。如果你通过浏览器的带的开发工具来观察一下DOM结构的话,你会发现你的每个组件渲染后的DOM最外层元素都如下面这样:
<div id="ember180" class="ember-view"> <h1>My Component</h1> </div>
你可以自定义需要哪种元素来包裹你的组件,同时也可以定义需要这个元素带有哪些class类和属性。
自定义元素
如果不想用div元素,那么你可以通过组件的tagName属性来指定你想要的元素:app/components/navigation-bar.js import Ember from 'ember'; export default Ember.Component.extend({ tagName: 'nav' });
app/templates/components/navigation-bar.hbs <ul> <li>{{#link-to "home"}}Home{{/link-to}}</li> <li>{{#link-to "about"}}About{{/link-to}}</li> </ul>
自定义元素class
你可以在调用组件的时候,用类似于常规的方式来给组件指定class:{{navigation-bar class="primary"}}
你同样也可以在组件类中通过className属性来给组件指定class类,该属性是一个字符串数组,所以可以同时指定多个class:
app/components/navigation-bar.js import Ember from 'ember'; export default Ember.Component.extend({ classNames: ['primary'] });
另外,如果你想通过属性来设置class,你可以通过类名绑定来实现。假如你将class与一个boolean属性绑定。那么这个boolean属性的真或假就决定了是否要应用这个class类:
app/components/todo-item.js import Ember from 'ember'; export default Ember.Component.extend({ classNameBindings: ['isUrgent'], isUrgent: true });
上面的组件将会得到下面的结果:
<div class="ember-view is-urgent"></div>
如果isUrgent属性变成false,那么is-urgent类就会被去掉。
默认的,boolean属性应用于class类名时通过”-“号连接不同单词。另一个方式,通过冒号”:”来指定你所需要的class类名:
app/components/todo-item.js import Ember from 'ember'; export default Ember.Component.extend({ classNameBindings: ['isUrgent:urgent'], isUrgent: true });
这样的话,会得到如下的结果:
<div class="ember-view urgent">
除了当属性为true时应用class之外,你还可以在属性为false的时候添加class类:
app/components/todo-item.js import Ember from 'ember'; export default Ember.Component.extend({ classNameBindings: ['isEnabled:enabled:disabled'], isEnabled: false });
这样将会得到下面的渲染结果:
<div class="ember-view disabled">
你同样可以指定当属性为false时添加某class类:
app/components/todo-item.js import Ember from 'ember'; export default Ember.Component.extend({ classNameBindings: ['isEnabled::disabled'], isEnabled: false });
渲染效果如下:
<div class="ember-view disabled">
反之,如果isEnabled为true:
<div class="ember-view">
如果被绑定的属性值是一个字符串,那么字符串的值就是class的类名:
app/components/todo-item.js import Ember from 'ember'; export default Ember.Component.extend({ classNameBind 4000 ings: ['priority'], priority: 'highestPriority' });
渲染结果如下:
<div class="ember-view highestPriority">
自定义属性
你可以通过attribubeBindings属性来给组件的根元素绑定属性:app/components/link-item.js import Ember from 'ember'; export default Ember.Component.extend({ tagName: 'a', attributeBindings: ['href'], href: 'http://emberjs.com' });
你可以给这些属性绑定花名:
app/components/link-item.js import Ember from 'ember'; export default Ember.Component.extend({ tagName: 'a', attributeBindings: ['customHref:href'], customHref: 'http://emberjs.com' });
如果被绑定的属性为null,那么它不会被渲染:
app/components/link-item.js import Ember from 'ember'; export default Ember.Component.extend({ tagName: 'span', title: null, attributeBindings: ['title'], });
当title为null时:
<span class="ember-view">
当title有值,且为”Ember JS”时:
<span class="ember-view" title="Ember JS">
本节完
相关文章推荐
- 随机播放音效 在音频组件中添加好元素 Random.Range在自定义的函数中可以用整形
- KnockoutJS 3.X API 第六章 组件(1) 组件和自定义元素 - 概述
- KnockoutJS 3.X API 第六章 组件(4) 自定义元素
- 双向绑定底层剖析(用于自定义组件双向数据绑定和非form表单元素)
- Android 自定义 View之画图的五个元素组件
- 从0到1Android自定义View(三)画图的五个元素组件
- android自定义分页组件
- react---自定义组件(二)滑块
- Android 自定义view(二) 如何实现自定义组件
- react native 自定义基础组件
- JSF2自定义组件编程系列 第八部分
- 小程序 自定义组件
- React-native自定义安卓组件
- Yii: 组件加载逻辑及自定义组件覆盖
- Vue中自定义全局组件的实现方法
- React-Native系列——自定义View组件开发
- (转)Flex 实践——自定义组件及调用
- 手摸手教你微信小程序开发之自定义组件
- hibernate 4 映射组件属性 自定义类型
- iOS开发之自定义组件