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

Now, you understand nested routes, so let’s move on to the nested UI part. To prevent you from having to go back, here are the route definitions again:

// app/router.js
import EmberRouter from '@ember/routing/router';
import config from 'rarwe/config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}
Router.map(function () { 
  this.route('bands', function () {
    this.route('band', { path: ':id' }, function () { 
      this.route('songs');
    }); 
  });
});

Before we delve into the templates, please note that since the application template now only contains the title bar and an empty outlet, you will not see anything of interest when you go to http://localhost:4200/. This URL works for your local computer. You need to add the /bands manually, so use  http://localhost:4200/bands to see the list of bands.
# Required templates

You saw in the [Routing](https://www.educative.io/collection/page/10370001/4603037207756800/6673520816291840) chapter that templates must be named to exactly match their corresponding routes. That suggests we should have templates for `application`, `bands`, `bands.band`, and `bands.band.songs`.

We also want to change how songs are displayed. We want to show them next to the list of bands and mark the band to which they belong, just as the [screenshot](https://www.educative.io/collection/page/10370001/4603037207756800/4526561804419072) showed at the beginning of the chapter.

Ember has a very neat way of supporting nested (or layered) UIs. If you define an `{{outlet}}` in the template of a route, it creates a slot for the children routes to render their content in. We'll leverage this to create our band-songs master-detail view.

When the user goes to `/bands`, we want to show the list of bands, and we also want each name to link to the song list for the band. Let's open up our `bands` template and make this change. Again, the newly added code is highlighted and the removed code is commented.

You’ll learn how to use nested templates in an Ember application in this lesson.

Nested Templates