Ember Routes - Dynamic Segment

Overview

In this lab we'll create urls with dynamic segments.

Objectives

Set up routes
Load data using Ember data
Generate a route and have it automatically write the path

In Rails

We create urls with dynamic segments like this.

In our routes file:

# routes.rb
get '/artists/:id', to: "artists#show"

In our controller

def show
  @widget = Widget.find(params[:id])
end

We access the dynamic portion of the url using params

In Ember

We create urls with dynamic segments like this.

In our router:

// app/router.js
this.route('artists', function() {
  this.route('artist', { path: ':artist_id' });
});

In our route

import Ember from 'ember';

export default Ember.Route.extend({
  model(params){
    this.store.findRecord('artist', params["artist_id"]);
  }
});

We access the dynamic portion of the url using params.

Let's get into it.

Dynamic Segments and the path

In Ember, all routes are named. Rails has this option with the :as option in routes, but Ember generates the name for you. This is useful when we want to reference a route.

In our example router, the route for /artists is simply artists. We use this route name in helpers like the link-to helper.

{{link-to "All Artists" "artists"}}

The path to something like /artists/1 is named artists.artist. Using this in the link-to helper looks like this:

{{link-to "See artist 1" "artists.artist" 1}}

Since it's a dynamic segment, we have to pass in the part that's dynamic.

Models

Routes are responsible for loading a model. We're going to be using Ember Data to fetch data from an endpoint. We'll be covering Ember Data in more detail in future lessons but for now, all we need to know is how to get all artists and how to get a single artist.

Within our route's model method, we can get all of the artists by returning the result of this.store.findAll('artist'). This works because we have a model in app/models/artist.js.

We'll use the findRecord method to find a specific artist. By setting the path option in our router to a dynamic segment, the model method in the route is called with an argument. The argument is an object with a property named after the dynamic segment you put in the router.

Here we have a route "artists.artist". The url for this route is "/artist/:artist_id". If we didn't have the path argument, the url would be "artists/artist". No dynamic nothing.

// app/router.js
this.route('artists', function() {
  this.route('artist', { path: ':artist_id' });
});

Here's the code for finding a record by id.

import Ember from 'ember';

export default Ember.Route.extend({
  model(params){
    this.store.findRecord('artist', params["artist_id"]);
  }
});

Actually... we lied. Here's some Ember Magic. If you named your dynamic segment after a model, it will try to look that model up automatically.

Our code then looks like this:

import Ember from 'ember';

export default Ember.Route.extend({
});

Templates

In the generated templates you'll see {{outlet}}. This is a lot like yield in rails templates, except it's used a LOT in Ember. If you look in app/templates/application.hbs, you'll see {{outlet}}. When you generate your artists route, the template will have {{outlet}}.

You can probably see that the template in app/templates/artists.hbs gets rendered into app/templates/application.hbs's {{outlet}}, but what get's rendered into artists.hbs's {{outlet}}?

If your urls are nested your templates are nested

Ember is going to see that your route is artists.artist and will render the artist.hbs template inside of artists.hbs... which is inside of application.hbs.

Generators

You can generate a route and have it automatically write the path for you by using the generator's path option. Say we wanted to create "artists.artist" with a dynamic segment of :artist_id. Here's what we'd run:

ember g route artists/artist --path=:artist_id

Tests

In these tests you'll be setting up 2 routes. /artists and /artists/1.

You'll be loading the data using Ember Data. You might have noticed that we haven't set up a backend. We are using a library called Ember CLI Mirage to fake requests. It's a temporary stand in until we build our Rails backend later. Right now, the endpoints are /artists and /artists/:id. This is enough to get the basic Ember Data working outlined in this README.

Check the tests to deduce which CSS classes you need to apply to your templates.

Happy Hacking

View Ember Routes - Dynamic Segment on Learn.co and start learning to code for free.

learn-co-students / ember-routes-dynamic-segments-nyc-web-111819 Goto Github PK