Question

英文原文：http://emberjs.com/guides/components/customizing-a-components-element/

默认情况下，每个组件是一个<div>元素。如果使用开发工具查看渲染后的组件，将看到一个如下所示的DOM表示：

1 2 3

<div id="ember180" class="ember-view"> <h1>My Component</h1> </div>

通过使用Javascript创建一个Ember.Component子类，可以自定义Ember生成的组件使用的元素类型，包括其属性和类名。

自定义元素

为了不使用div，继承Ember.Component并为其添加一个tagName属性。这个属性可以是任何合法的HTML5标签。

1 2 3

App.NavigationBarComponent = Ember.Component.extend({ tagName: 'nav' });

1 2 3 4 5

{{! templates/components/navigation-bar }} <ul> <li>{{#link-to 'home'}}Home{{/link-to}}</li> <li>{{#link-to 'about'}}About{{/link-to}}</li> </ul>

自定义类名

通过设置classNames属性为一个字符串数组，可以指定组件元素的类名：

1 2 3

App.NavigationBarComponent = Ember.Component.extend({ classNames: ['primary'] });

如果需要通过组件的属性来决定使用的类名，可以使用类名绑定。如果绑定一个布尔型属性，类名将根据该属性的值来决定是添加还是移除类名：

1 2 3 4

App.TodoItemComponent = Ember.Component.extend({ classNameBindings: ['isUrgent'], isUrgent: true });

组件将渲染为：

1	<div class="ember-view is-urgent"></div>

如果isUrgent变为false，那么is-urgent类名将被移除。

默认情况下，布尔属性的名称会用'-'来连接。使用分号可以自定义类名：

1 2 3 4

App.TodoItemComponent = Ember.Component.extend({ classNameBindings: ['isUrgent:urgent'], isUrgent: true });

组件将渲染为：

1	<div class="ember-view urgent">

除了为值为true的添加自定义类名外，还可以在值为false的时候来指定类名：

1 2 3 4

App.TodoItemComponent = Ember.Component.extend({ classNameBindings: ['isEnabled:enabled:disabled'], isEnabled: false });

组件将渲染为：

1	<div class="ember-view disabled">

另外，还可以通过定义classNameBindings，实现只在属性为false的时候添加类名：

1 2 3 4

App.TodoItemComponent = Ember.Component.extend({ classNameBindings: ['isEnabled::disabled'], isEnabled: false });

组件将渲染为：

1	<div class="ember-view disabled">

如果isEnabled属性设置为true，则不会添加类名：

1	<div class="ember-view">

如果绑定的值是一个字符串，那么该值将作为类名，且不加任何修改：

1 2 3 4

App.TodoItemComponent = Ember.Component.extend({ classNameBindings: ['priority'], priority: 'highestPriority' });

组件将渲染为：

1	<div class="ember-view highestPriority">

自定义属性

通过attributeBindings可以绑定属性到代表组件的DOM元素：

1 2 3 4 5

App.LinkItemComponent = Ember.Component.extend({ tagName: 'a', attributeBindings: ['href'], href: "http://emberjs.com" });

也可以使用不同的命名属性来绑定这些属性：

1 2 3 4 5

App.LinkItemComponent = Ember.Component.extend({ tagName: 'a', attributeBindings: ['customHref:href'], customHref: "http://emberjs.com" });

例子

下面是一个Todo应用的例子，展示了使用红色的背景来显示已完成的待办事项：

JS Bin