View item-component.hbs
<div>
<a href="{{item.externalUrl}}">{{item.title}}</a>
<div>
<span>{{item.points}} points by {{item.user}} {{item.timeAgo}} </span>
<span {{action markAsRead}} class='hide-button test__item-delete-button'>
{{fa-icon "eye-slash"}}
</span>
</div>
{{#link-to 'item' item.id}} {{item.commentsCount}} Comments{{/link-to}}
</div>
View install font-awesome
ember install ember-font-awesome
View frontpage.hbs
{{item-list-component
items=model
markAsRead=(action "markAsRead")
}}
View gist:913972366dca2d4d3f6598968de53ee9
import Controller from '@ember/controller';
export default Controller.extend({
actions: {
markAsRead(item) {
this.get('store').unloadRecord(item);
}
}
});
View active.js
import BaseController from 'ember-hacker-news/controllers/base-controller';
export default BaseController.extend({
});
View comment-component.hbs
<div class="comment">
<em>{{comment.user}} {{comment.timeAgo}}</em>
<p>{{{comment.content}}}</p>
{{#each comment.comments as |childComment|}}
{{comment-component comment=childComment}}
{{/each}}
</div>
View item.js
import Route from '@ember/routing/route';
export default Route.extend({
model(params) {
return this.get('store').findRecord('item', params.id);
}
});
View comment.js
import DS from 'ember-data';
export default DS.Model.extend({
content: DS.attr('string'),
user: DS.attr('string'),
timeAgo: DS.attr('string'),
comments: DS.hasMany('comments', { inverse: null })
});
View item.js
import DS from 'ember-data';
import { computed } from '@ember/object';
export default DS.Model.extend({
title: DS.attr('string'),
points: DS.attr('number'),
time: DS.attr('unix-date'),
timeAgo: DS.attr('string'),
url: DS.attr('string'),
domain: DS.attr('string'),
View item-component.hbs
<p>
<strong>id:</strong> {{item.id}}<br>
<strong>title:</strong> {{item.title}}<br>
<strong>points:</strong> {{item.points}}<br>
<strong>time:</strong> {{item.time}}<br>
<strong>time ago:</strong> {{item.timeAgo}}<br>
<strong>comments count</strong> {{story.commentsCount}}<br>
<strong>url</strong> <a href="{{item.url}}">{{item.url}}</a><br>
<strong>domain</strong> <a href="http://{{item.domain}}">{{item.domain}}</a><br>
</p>