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

## Showing the band's name and description
Let's display the band's name and description on the band details page by making the following modifications:

{{!-- app/templates/bands/band/details.hbs --}}
{{!-- {{page-title "Details"}}
{{outlet}} --}}
{{page-title @model.name " details | Rock & Roll with Octane" replace=true}}

   <h2 class="mb-4 text-lg">{{@model.name}}</h2>
   <p>{{@model.description}}</p>

If we load up the application on `/bands/pearl-jam`, everything works as expected and the app is transitioned to the `bands.band.details` route, while the URL changes to `/bands/pearl-jam/` details, since Pearl Jam has a description:

However, if you click on the Pearl Jam link again, you see an empty panel for the band instead of the band's description:

That's really weird. How can this happen?

## Transitions of Ember router
The Ember router can only transition to leaf routes. `bands.band` has three child routes: `bands.band.songs`, `bands.band.details`, and the implicit `bands.band.index`. When we instruct Ember to go to a route that has subroutes, like `bands.band`, the actual transition will be made to its index route, `bands.band.index`.

That means that clicking `<LinkTo @route="bands.band" ...>` will actually attempt a transition from `bands.band.details` to `bands.band.index`. Since this transition does not need to pass by the common parent route `bands.band` to complete the transition, the redirection code defined in that route is not executed.
This subtle bug can be squashed by moving the redirection to `bands.band.index`. Let's create that route:
```shell
ember g route bands/band/index
```
Then, cut-paste the code into it from the bands.band route:

# Showing the band's name and description
Let's display the band's name and description on the band details page by making the following modifications:

That's really weird. How can this happen?

# Transitions of Ember router
The Ember router can only transition to leaf routes. `bands.band` has three child routes: `bands.band.songs`, `bands.band.details`, and the implicit `bands.band.index`. When we instruct Ember to go to a route that has subroutes, like `bands.band`, the actual transition will be made to its index route, `bands.band.index`.

That means that clicking `<LinkTo @route="bands.band" ...>` will actually attempt a transition from `bands.band.details` to `bands.band.index`. Since this transition does not need to pass by the common parent route `bands.band` to complete the transition, the redirection code defined in that route is not executed.
This subtle bug can be squashed by moving the redirection to `bands.band.index`. Let's create that route:
```shell
ember g route bands/band/index
```
Then, cut-paste the code into it from the bands.band route:

You’ll learn to display the band's name and description on the band details page in this lesson.

Course Overview

Getting Started with Ember

Templates and Data Bindings

Routing

Nested Routes

Components

Controllers

Building a Catalog

Talking to a Backend

Advanced Routing

Testing

Query Params

Loading and Error Substates

Helpers

Conclusion

Appendix

Displaying the Band's Name

Showing the band’s name and description

Transitions of Ember router