Ember Twiddle Demo: Simple nested routes

README.md

Ember Twiddle Demo: Simple nested routes

Demo

Basic example of nested routes with some CSS to highlight the active route in the navigation links.

controllers.actors.movies.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actors: null, // this will be set by setupController only once, when the route is entered with an id.
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('movies', function () {
    this.route('actors', { path: ':movie_id' });
  });
});

export default Router;

routes.movies.actors.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
		const actorsByMovie = {
      1: [
        "Mark Hamill",
        "Carrie Fisher"
      ],
      2: [
        "Liv Tyler",
        "Elijah Wood"
      ],
      3: [
        "William H Macy",
        "Frances McDormand"
      ]
    };
    
    return actorsByMovie[params.movie_id];
  },
  setupController(controller, model) {
    this._super(controller, model);
    // set the actors property of the controller
    // if it hasn't been set - ie memoize
    if(Ember.isEmpty(controller.get('actors'))) {
      controller.set('actors', model)
    }
  },
});

routes.movies.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return [
      { id: 1, title: 'Star Wars' },
      { id: 2, title: 'Lord of the Rings' },
      { id: 3, title: 'Fargo' },
    ];
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.active {
  font-weight: bold;
  color: navy;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>

{{#link-to "movies"}}All movies{{/link-to}}

{{outlet}}

templates.movies.actors.hbs

<h3>Actors</h3>

<ul>
  {{#each actors as |actor|}}
  	{{log 'rendered' actor}}
    <li>{{actor}}</li>
  {{/each}}
</ul>

templates.movies.hbs

<h3>Movies</h3>

<ul>
  {{#each model as |movie|}}
    <li>
    	{{#link-to "movies.actors" movie.id}}
      	{{movie.title}}
      {{/link-to}}
    </li>
  {{/each}}
</ul>

{{outlet}}

twiddle.json

{
  "version": "0.11.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.18.0",
    "ember-data": "2.18.0",
    "ember-template-compiler": "2.18.0",
    "ember-testing": "2.18.0"
  },
  "addons": {}
}