Customizing a Component's Element Edit Page

By default, each component is backed by a <div> element. If you were to look at a rendered component in your developer tools, you would see a DOM representation that looked something like:

1
2
3

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

You can customize what type of element Ember generates for your component, including its attributes and class names, by creating a subclass of Ember.Component in your JavaScript.

Customizing the Element

To use a tag other than div, subclass Ember.Component and assign it a tagName property. This property can be any valid HTML5 tag name as a string.

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>

Customizing Class Names

You can also specify which class names are applied to the component's element by setting its classNames property to an array of strings:

1
2
3

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

If you want class names to be determined by properties of the component, you can use class name bindings. If you bind to a Boolean property, the class name will be added or removed depending on the value:

1
2
3
4

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

This component would render the following:

1

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

If isUrgent is changed to false, then the is-urgent class name will be removed.

By default, the name of the Boolean property is dasherized. You can customize the class name applied by delimiting it with a colon:

1
2
3
4

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

This would render this HTML:

1

<div class="ember-view urgent">

Besides the custom class name for the value being true, you can also specify a class name which is used when the value is false:

1
2
3
4

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

This would render this HTML:

1

<div class="ember-view disabled">

You can also specify a class which should only be added when the property is false by declaring classNameBindings like this:

1
2
3
4

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

This would render this HTML:

1

<div class="ember-view disabled">

If the isEnabled property is set to true, no class name is added:

1

<div class="ember-view">

If the bound value is a string, that value will be added as a class name without modification:

1
2
3
4

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

This would render this HTML:

1

<div class="ember-view highestPriority">

Customizing Attributes

You can bind attributes to the DOM element that represents a component by using attributeBindings:

1
2
3
4
5

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

You can also bind these attributes to differently named properties:

1
2
3
4
5

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

Example

Here is an example todo application that shows completed todos with a red background:

JS Bin