rarwe.tar.gz

Ember

Ember-copy

ember2

embercss

rarwe

Ember-copy-5yvdqv

Ember-copy-5yvdqv-copy

Ember-Acceptest

Ember-Acceptest-copy

Ember-unitest

rarwe-copy

Ember-Acceptest-challenge

Ember-helper-challenge

In this course, you begin with an introduction to Ember.js, a JavaScript framework for building client-side applications.

After that, the course guides you through the steps of building a real application so that you can see how the concepts are applied in practice. You'll learn about the building blocks of Ember one by one, in a way that crushes the allegedly steep learning curve of the framework.

The application will get shinier (and/or more robust) with each chapter. By the end, we will have a decent app, and you'll have a great new skill you can add to your resume.

Developing Robust Ember.js Applications

In many cases, the built-in method we discussed before is totally fine. The `<a>` tags, rendered by `LinkTo`, have an `active` class, and the tag is styled with CSS to highlight it as active. However, in other cases, this is not flexible enough. What if it's not the `a` tag that should have the `active` class? Or, what if the project uses a utility-first approach and the elements are not styled via custom class names?

In our app, both of these hold true, so we should look for another solution.

# `isActive` method
We can rely on our trustworthy ally, the router service. It has an `isActive` method that tells us whether a certain route with the passed parameters is active or not. Because the band navigation markup is in the `bands.band` template, we could create the related controller and the "activeness" code there.

# `BandNavigation` component
However, a cleaner solution is to extract a `BandNavigation` component to implement it in. This way, all the code will be nicely encapsulated in the component whose name exactly describes its purpose.

Let's first generate the component and move the current band navigation markup there:

```shell
ember g component band-navigation
```

The code to be removed is commented, and the newly added code is highlighted.

In this lesson, we will discuss how to mark links as active using active class.

Marking Links as Active