5.5 Components--customizing A compnent ' s Element

I. Overview

By default, each component is based on a <div> element. If you look at a rendered component in your developer tool, you will see a DOM representation like this:

<id= "ember180"  class= "Ember-view">   <H1>My Component</H1></ Div >

You can customize the type of Ember generated element for your component, including its properties and class name, by creating a ember.component subclass.

Second, customizing the element

Using a label that is not a div, the subclass ofEmber.component assigns it a tagName property. This property can be any valid HTML5 tag name as a string.

App/components/navigation-bar.js

default Ember.Component.extend ({  ' 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 >

Third, customizing class names

1. You can also set the class name of the component's element by setting its classnames property to a string array.

App/components/navigation-bar.js

default Ember.Component.extend ({  classnames: [' Primary ']});

2. If you want to determine the class name by component type, you can use the class name binding. If you bind a Boolean attribute, the class name will be added or removed based on this value:

App/components/todo-item.js

default Ember.Component.extend ({  classnamebindings: [' isurgent '],  true});

This component will be rendered as:

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

If isurgent is changed to false, then the is-urgent class name is removed.

3. By default, the name of the Boolean attribute is dasherized. You can customize a custom class name by using a ":" :

App/components/todo-item.js

Export Default Ember.Component.extend ({  classnamebindings: [' isurgent:urgent '],  isurgent:true});

will be rendered as:

<class= "Ember-view urgent">

4. In addition to the custom name when the value is true, you can also specify a class name when the value is false:

App/components/todo-item.js

default Ember.Component.extend ({  classnamebindings: [' isEnabled:enabled:disabled '],    False});

This will be rendered as:

<class= "Ember-view disabled">

5. You can also specify a class that is added only when the value is false :

App/components/todo-item.js

default Ember.Component.extend ({  classnamebindings: [' isenabled::d isabled '],  false });

will be rendered as:

<class= "Ember-view disabled">

If the isenabled property is set to true, the class name is not added:

<class= "Ember-view">

6. If the property value being bound is a string, the value will be added as a property name without any changes:

App/components/todo-item.js

Export Default Ember.Component.extend ({  classnamebindings: [' priority '], priority  : ' highestpriority '});

Render as:

<class= "Ember-view highestpriority">

Iv. Customizing Attriburtes

You can bind attributes to DOM elements that represent components, using attributebindings:

App/components/link-item.js

Export Default Ember.Component.extend ({  tagName: ' A ',  attributebindings: [' href '],  href: "/http/ Emberjs.com "});

You can also bind these properties attributes to different named properties:

App/components/link-item.js

default Ember.Component.extend ({  ' a ',  attributebindings: [' Customhref:href '],  "http://emberjs.com"});

5.5 Components--customizing A compnent ' s Element