发布于 2015-08-18 16:31:45 | 388 次阅读 | 评论: 0 | 来源: 网络整理
默认情况下，每个组件是一个<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应用的例子，展示了使用红色的背景来显示已完成的待办事项：