Dynamic segements with ID

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'params object help?'
});

models.cat.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

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

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('cats', { path: '/' }, function() {
    this.route('cat', { path: '/:id' });
  });
});

export default Router;

routes.cats.cat.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.store.query('cat', params.id);
  }
});

routes.cats.js

import Ember from 'ember';

var catsData = [
	{
		id: 1, 
		name: 'Bengal',
		slug: 'bengal'
	},
	{
		id: 2,
		name: 'Burmese',
		slug: 'burmese'
	},
	{
		id: 3,
		name: 'British Shorthair',
		slug: 'british-shorthair'
	}
];

export default Ember.Route.extend({
  model() {
		return catsData;
  }
});

templates.application.hbs

<h1>{{appName}}</h1>

{{outlet}}

templates.cats.cat.hbs

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

{{link-to 'home' 'application'}}

templates.cats.hbs

<h2>Cats:</h2>



{{outlet}}

templates.cats.index.hbs

<ul class='menu'>
	{{#each model as |cat|}}
  	<li>
    	{{#link-to 'cats.cat' cat}}
      	{{cat.name}}
      {{/link-to}}
     </li>
  {{/each}}
</ul>

twiddle.json

{
  "version": "0.10.1",
  "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.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0"
  },
  "addons": {}
}