Ember CLI

Ember DATA

Routing

Ember to Ruby on Rails

Controllers & Templates

Services

Components

Data Down, Actions Up

🏠 HOME

The URL is a first-class citizen in Ember, everything starts at the URL.

It represents the state of the current page’s primary data. For example, a page displaying comments for blog post with ID=5 could naturally have a URL of http://ember.app/posts/5/comments.

Comments are primary data. A tag cloud on that same page loaded by another service would be considered secondary data and shouldn’t belong to the URL.

In order to map URLs to routes we have an object called the Router:

// app/router.js

// ...
Router.map(function() {
  this.route('posts', function() {
    this.route('post', { path: ':post_id' });
  });
});
// ...

Ember has a mechanism to locate different kind of files (routes, controllers, services, etc). A standard path for PostsPostRoute is app/routes/posts/post.js.

When the URL is requested, the PostsPostRoute will invoke model() from where we return our model:

// app/routes/posts/post.js

import Route from '@ember/routing/route';

export default class PostsPostRoute extends Route {
  model({ post_id }) {
    return {
      id: post_id,
      body: "Lorem Ipsum"
    }
  }
});

<aside> <img src="/icons/playback-previous_lightgray.svg" alt="/icons/playback-previous_lightgray.svg" width="40px" /> Ember CLI

</aside>

<aside> <img src="/icons/playback-next_lightgray.svg" alt="/icons/playback-next_lightgray.svg" width="40px" /> Controllers & Templates

</aside>