英文原版：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">

本节完