08.0.0 hasMany Associations - bazzel/ember2-workshop GitHub Wiki
- Define and render a hasMany association
- Change a timestamp into human readable format
See the installation instructions. Use tag 8.0.0.
- Open
frontend/app/templates/products/show.hbs. - Remove all but one
<div class='row'>elements and the subsequent<hr/>tag from their<div class='reviews'>container. - Wrap the remaining
<div>in the Handlebars{{each}}helper:
- Open
frontend/app/models/product.jsand add areviewsassociation:
export default DS.Model.extend({
...
image: DS.attr(),
reviews: DS.hasMany('review')
});- Inspect the error shown in the Console tab in the browser. Ember doesn't know the
reviewmodel yet. Let's define it. - In the
frontendfolder, enter the commandember g model review. - Open
frontend/app/models/review.jsand add the following attributes:
export default DS.Model.extend({
description: DS.attr(),
rating: DS.attr(),
user: DS.attr(),
createdAt: DS.attr()
})- Open
frontend/app/templates/products/show.hbsand replace:-
Anonymouswith{{review.user}} -
10 days agowith{{review.createdAt}} -
See more snippets like this...with{{review.description}}
-
Here you will install and use Ember-moment to use moment.js for formatting the creation date of the review, so it can display 4 days ago instead of something like 2015-10-26T14:07:33.926Z.
- In the
frontendfolder, enter the commandember install [email protected]. - Open
frontend/app/templates/products/show.hbsand replace{{createdAt}}with{{moment-from-now createdAt}}.