team>players

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'team>player'
});

models.player.js

import DS from 'ember-data';

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

models.team.js

import DS from 'ember-data';

export default Model.extend({
  // don't add id
  title: DS.attr('string'),
  slug: DS.attr('string'),
  players: DS.hasMany('player'),
});

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

export default Router;

routes.players.js

import Ember from 'ember';

// do this right: https://guides.emberjs.com/current/object-model/classes-and-instances/
var playersData = [
  {
    id: 1,
    name: 'allyssa',
    team: 1,
  },
  {
    id: 2,
    name: 'Belle',
    team: 1,
  },
  {
    id: 3,
    name: 'Carter',
    team: 1,
  },
  {
    id: 4,
    name: 'Derek',
    team: 2,
  },
  {
    id: 5,
    name: 'Erik',
    team: 2,
  },
  {
    id: 6,
    name: 'Frank',
    team: 2,
  },
  {
    id: 7,
    name: 'Gaurav',
    team: 3,
  },
  {
    id: 8,
    name: 'Henry',
    team: 3,
  },
  {
    id: 9,
    name: 'Igor',
    team: 3,
  },
];

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

routes.teams.js

import Ember from 'ember';

var teamsData = [
  {
    id: 1,
    title: 'Four eyes',
    slug: 'four-eyes',
    players: [1, 2, 3],
  },
  {
    id: 2,
    title: 'Wheel breakers',
    slug: 'wheel-breakers',
    players: [4, 5, 6],
  },
  {
    id: 3,
    title: 'Faster reactors',
    slug: 'faster-reactors',
    players: [7, 8, 9],
  },
];

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

routes.teams.team-list.js

import Ember from 'ember';

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

routes.teams.team.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  model(params) { // prams is the last 'team' on the link-to basically
    return this.get('store').findRecord('team', params.id);
    // read this? https://guides.emberjs.com/v2.12.0/models/relationships/
  },
  
});

templates.application.hbs

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

<nav>{{link-to 'teams' 'teams'}}</nav>

<br/><br/>

{{outlet}}

templates.teams.team-list.hbs

(it's setup to default the route here... teams/team-list)

<ul class='team-list'>
{{#each model as |team|}}
	
  {{log team}}
		
	<li class='team'>
  	{{#link-to 'teams.team' team}}
  		{{team.slug}}
    {{/link-to}}
  </li>		
{{/each}}
</ul>

templates.teams.team.hbs

<h1>{{model.title}}</h1>

Then... you probably want to list the team members here...

<ul class='player-list'>
{{#each model.players as |player|}}
	<li class='player'>
  	{{player.name}} {{log player}}
  </li>
{{/each}}
</ul>

twiddle.json

{
  "version": "0.12.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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}