Today we'll see a solution to the previous exercise, as well as a few resources to help prepare you for the upcoming episodes.
Solution
In the last episodes you were asked to add a
person
model that belongsTo the
event
model. You can do this with by creating an
app/models/person.js
which would look like this:
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo } from 'ember-data/relationships';
export default Model.extend({
firstName: attr('string'),
lastName: attr('string'),
event: belongsTo('event')
});
We should add a the
person
model as a hasMany on the
event
model.
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';
import Ember from 'ember';
export default Model.extend({
title: attr('string'),
description: attr('string'),
address: belongsTo('address'),
people: hasMany('person'),
attendeeCount: Ember.computed('people', function(){
let people = this.get('people');
return people.get('length');
})
});
We'll need a
person
mirage model:
import { Model, belongsTo } from 'ember-cli-mirage';
export default Model.extend({
event: belongsTo()
});
We'll need to update the
event
mirage model:
import { Model, belongsTo, hasMany } from 'ember-cli-mirage';
export default Model.extend({
address: belongsTo(),
people: hasMany()
});
Create a mirage factor for person:
import { Factory, faker } from 'ember-cli-mirage';
export default Factory.extend({
firstName() { return faker.name.firstName();},
lastName() { return faker.name.lastName(); }
});
In our event factory we should remove our
attendeesCount
line as it is now a computed property.
In
mirage/scenarios/default.js
:
export default function(server) {
let addresses = server.createList('address', 10);
addresses.forEach((address) => {
let people = server.createList('person', Math.floor((Math.random() * 30) + 1));
server.create('event', { address, people});
});
}
We will then add our people routes to
mirage/config.js
:
this.get('/people', (schema) => {
return schema.people.all();
});
this.get('/people/:id', (schema, request) => {
return schema.people.find(request.params.id);
});
You can clone the completed app here: https://github.com/baroquon/events-app/tree/005.5.solution
Resources
This week we will be going in more depth with components. If you want to do some preparatory reading I suggest the following:
Comments for Solution and Prep