组件 - 自定义组件元素

优质

小牛编辑

137浏览

2023-12-01

默认情况下，每个组件是一个<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'
});

{{! 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']
});

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

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

组件将渲染为：

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

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

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

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

组件将渲染为：

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

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

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

组件将渲染为：

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

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

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

组件将渲染为：

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

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

1	<div class="ember-view">

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

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

组件将渲染为：

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

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

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

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

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

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