This article was peer reviewed by Edwin Reynoso and Nilson Jacques. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Components are a vital part of an Ember application. They allow you to define your own, application-specific HTML tags and implement their behavior using JavaScript. As of Ember 2.x components will replace views and controllers (which have been deprecated) and are the recommended way to build an Ember application.

Ember’s implementation of components adheres as closely to the W3C’s Web Components specification as possible. Once Custom Elements become widely available in browsers, it should be easily to migrate Ember components to the W3C standard and have them usable by other frameworks.

If you’d like to find out more about why routable components are replacing controllers and views, then check out this short video by Ember core team members Yehuda Katz and Tom Dale.

The Tab Switcher Application

[author_more]

To get an in-depth understanding of Ember components, we will build a tab-switcher widget. This will comprise a set of tabs with associated content. Clicking on a tab will display that tab’s content and hide that of the other tabs. Simple enough? Lets begin.

As ever, you can find the code for this tutorial on our GitHub repo.

The Anatomy of an Ember Component

An Ember component consists of a Handlebars template file and an accompanying Ember class. The implementation of this class is required only if we need extra interactivity with the component. A component is usable in a similar manner to an ordinary HTML tag. When we build our tab switcher component, we will be able to use it like so:

{{tab-switcher}}{{/tab-switcher}}

The template files for Ember components live in the directory app/templates/components. The class files live in app/components. We name Ember components using all lowercase letters with words separated by hyphens. This naming is by convention so we avoid name clashes with future HTML web components.

Our main Ember component will be tab-switcher. Notice I said main component because we will have several components. You can use components in conjunction with others. You can even have components nested inside another parent component. In the case of our tab-switcher, we will have one or more tab-item components like so:

{{#each tabItems as |tabItem| }}
  {{tab-item item=tabItem 
             setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}

As you can see, components can also have attributes just like native HTML elements.

Create an Ember 2.x Project

To follow along with this tutoial, you’ll need to create an EMber 2.x project. Here’s how:

Ember is installed using npm. For a tutorial on npm, you can see here.

npm install -g ember-cli

At the time of writing this will pull in version 1.13

ember -v
=> version: 1.13.8

Next, create a new Ember app:

ember new tabswitcher

Navigate to that directory and edit the bower.json file to include the latest version of the Ember, ember-data and ember-load-initializers:

{
  "name": "hello-world",
  "dependencies": {
    "ember": "^2.1.0",
    "ember-data": "^2.1.0",
    "ember-load-initializers": "^ember-cli/ember-load-initializers#0.1.7",
    ...
  }
}

Back in the terminal run:

bower install

Bower might prompt you for a version resolution for Ember. Select the 2.1 version from the list provided and prefix it with an exclamation mark to persist the resolution to bower.json.

Next start Ember CLI’s development server:

ember server

Finally navigate to http://localhost:4200/ and check the version your browser’s console.

Creating the Tab Switcher Component

Let’s create a tab switcher component using Ember’s built in generator:

ember generate component tab-switcher

This will create three new files. One is a Handlebars file for our HTML (app/templates/components/tab-switcher.hbs), the second is a JavaScript file for our component class (app/components/tab-switcher.js), the final one is a test file (tests/integration/components/tab-switcher-test.js). Testing the component is beyond the scope of this tutorial, but you can read more about that on the Ember site.

Now run ember server to load up the server and navigate to http://localhost:4200/. You should see a welcome message titled “Welcome to Ember”. So why isn’t our component showing up? Well, we haven’t used it yet, so lets do so now.

Using the Component

Open the application template app/templates/application.hbs. Add in the following after the h2 tag to use the component.

{{tab-switcher}}

In Ember, components are usable in two ways. The first way, called inline form, is to use them without any content inside. This is what we’ve done here. The second way is called block form and allows the component to be passed a Handlebars template that is rendered inside the component’s template wherever the {{yield}} expression appears. We will be sticking with the inline form throughout this tutorial.

This still isn’t displaying any content on the screen, though. This is because, the component itself doesn’t have any content to show. We can change this by adding the following line to the component’s template file (app/templates/components/tab-switcher.hbs):

<p>This is some content coming from our tab switcher component</p>

Now when the page reloads (which should happen automatically), you will see the above text displayed. Exciting times!

Continue reading %Understanding Components in Ember 2%

Source: SitePoint