标签：
一、概述
默认的，每一个组件都基于一个<div>元素。如果你在你的开发者工具中查看一个渲染的组件，你将会看到一个像这样的DOM表示：
<div id="ember180" class="ember-view"> <h1>My Component</h1> </div>
你可以为你的组件自定义Ember生成元素的类型，包括它的属性和类名，通过创建一个Ember.Component的子类。
二、Customizing the element
使用一个不是div的标签，Ember.Component的子类分配给它一个tagName属性。这个属性可以是任何有效的HTML5标签名称作为字符串。
app/components/navigation-bar.js
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>
三、Customizing class names
1. 你也可以通过设置它的classNames属性为一个字符串数组来制定组件的元素的类名。
app/components/navigation-bar.js
export default Ember.Component.extend({ classNames: [‘primary‘] });
2. 如果你希望通过组件类型来确定类名，你可以使用类名绑定。如果你绑定一个布尔属性，类名将会根据这个值被添加或者被移除：
app/components/todo-item.js
export default Ember.Component.extend({ classNameBindings: [‘isUrgent‘], isUrgent: true });
这个组件将会被渲染为：
<div class="ember-view is-urgent"></div>
如果isUrgent被改为false，然后is-urgent类名会被移除。
3. 默认的，布尔属性的名字被dasherized。你可以通过一个"："来自定义自定义类名：
app/components/todo-item.js
export default Ember.Component.extend({
classNameBindings: [‘isUrgent:urgent‘],
isUrgent: true
});
者将被渲染为：
<div class="ember-view urgent">
4. 除了该值为true时自定义名称之外，你也可以在该值为false时指定一个类名：
app/components/todo-item.js
export default Ember.Component.extend({ classNameBindings: [‘isEnabled:enabled:disabled‘], isEnabled: false });
这将被渲染为：
<div class="ember-view disabled">
5. 你也可以指定一个类，它仅仅在值为false时被添加：
app/components/todo-item.js
export default Ember.Component.extend({ classNameBindings: [‘isEnabled::disabled‘], isEnabled: false });
将被渲染为：
<div class="ember-view disabled">
如果isEnabled属性被设置为true，不会添加类名：
<div class="ember-view">
6. 如果被绑定的属性值是一个字符串，这个值将会作为属性名被添加不会有任何更改：
app/components/todo-item.js
export default Ember.Component.extend({
classNameBindings: [‘priority‘],
priority: ‘highestPriority‘
});
渲染为：
<div class="ember-view highestPriority">
四、Customizing Attriburtes
你可以绑定属性到代表组件的DOM元素，利用attributeBindings：
app/components/link-item.js
export default Ember.Component.extend({
tagName: ‘a‘,
attributeBindings: [‘href‘],
href: "http://emberjs.com"
});
你也可以绑定这些属性attributes到不同的命名属性properties：
app/components/link-item.js
export default Ember.Component.extend({ tagName: ‘a‘, attributeBindings: [‘customHref:href‘], customHref: "http://emberjs.com" });
5.5 Components -- Customizing A Compnent's Element
标签：
原文地址：http://www.cnblogs.com/sunshineground/p/5164181.html
