Slugs

controllers.application.js

import Ember from 'ember'

export default Ember.Controller.extend({
  appName: 'People',
})

models.person.js

import Model from 'ember-data/model'
import attr from 'ember-data/attr'

export default Model.extend({
  name: attr('string'),
  likes: attr('string'),
  slug: attr('string'),
})

router.js

import EmberRouter from '@ember/routing/router'
import config from './config/environment'

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

Router.map(function() {
  this.route('person', { path: 'people/:slug' })
})

export default Router

routes.application.js

import Ember from 'ember'

export default Ember.Route.extend({
  beforeModel() {
    [
      ['John', 'Guitar/Vocals'],
      ['Paul', 'Bass/Vocals'],
      ['George', 'Guitar'],
      ['Ringo', 'Drums']
    ].map(([name, likes], idx) => {
      let slug = name.split(/[\W_]/).join('-').toLowerCase()

      this.store.push({
        data: {
          id: idx + 1,
          type: 'person',
          attributes: { name, likes, slug }
        }
      })
    })
  }
})

routes.index.js

import Ember from 'ember'

export default Ember.Route.extend({
  model() {
    return this.store.peekAll('person')
  },
})

routes.person.js

import Ember from 'ember';

export default Ember.Route.extend({
  model({ slug }) {
    return this.store.peekAll('person').find(person => {
      return person.slug === slug
    })
  }
})

templates.application.hbs

<h1>{{link-to appName "index"}}</h1>

{{outlet}}

templates.index.hbs

<h2>Index</h2>

{{#if model.length}}
  <ul class="people">
    {{#each model as |person|}}
      <li class="person">
        {{link-to person.name "person" person.slug}}
      </li>
    {{/each}}
  </ul>
{{else}}
	<p>No people found.</p>
{{/if}}

templates.person.hbs

<h2>{{model.name}}</h2>

<dl>
	<dt>ID</dt>
  <dd>{{model.id}}</dd>

	<dt>Slug</dt>
  <dd>{{model.slug}}</dd>

  <dt>Likes</dt>
  <dd>{{model.likes}}</dd>
</dl>

twiddle.json

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