Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save 3gwebtrain/71061b1ec634ced16c127667fa64eb2f to your computer and use it in GitHub Desktop.
Save 3gwebtrain/71061b1ec634ced16c127667fa64eb2f to your computer and use it in GitHub Desktop.
team>players
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'team>player'
});
import DS from 'ember-data';
export default Model.extend({
name: DS.attr('string'),
team: DS.belongsTo('team'),
});
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'),
});
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;
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;
},
});
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;
},
});
import Ember from 'ember';
export default Ember.Route.extend({
});
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/
},
});
<h1>{{appName}}</h1>
<nav>{{link-to 'teams' 'teams'}}</nav>
<br/><br/>
{{outlet}}
(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>
<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>
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment