英文原版:https://guides.emberjs.com/v2.14.0/components/customizing-a-components-element/
默认的,每一个组件都被一个<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({
classNameBindings: ['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">
本节完