Skip to content

Instantly share code, notes, and snippets.

Avatar
😅
Always learning

serena serenaf

😅
Always learning
View GitHub Profile
View components.create-segment-modal.js
import Ember from 'ember';
export default Ember.Component.extend({
hasName: Ember.computed.notEmpty('name'),
actions: {
log(message) {
console.log(message);
}
}
});
View components.x-modal-body.js
import Ember from 'ember';
export default Ember.Component.extend({
});
@serenaf
serenaf / overview.md
Last active Nov 7, 2017
Ember Beginner Workshop
View overview.md
View getting_started.txt
npm install -g ember-cli@2.16
git clone https://github.com/intercom/ember-hacker-news.git
npm install
View creating_routes
ember g route frontpage
ember g route new
ember g route jobs
ember g route ask
ember g route active
ember g route show
View creating_item_model
ember g model item title:string points:number time:unix-date timeAgo:string url:string domain:string
View updating_model_hooks
For routes active, ask, jobs, new, show
model () {
return this.get('store').query('item',
{
page: 1,
filter: 'NAME_OF_ROUTE'
});
}
View updating_templates
{{#each model as |item|}}
<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>
View navigation-bar-component.hbs
<ul>
<li>{{#link-to 'frontpage'}}Front page{{/link-to}}</li>
<li>{{#link-to 'new'}}new{{/link-to}}</li>
<li>{{#link-to 'show'}}show{{/link-to}}</li>
<li>{{#link-to 'ask'}}ask{{/link-to}}</li>
<li>{{#link-to 'jobs'}}jobs{{/link-to}}</li>
<li>{{#link-to 'active'}}active{{/link-to}}</li>
</ul>
@serenaf
serenaf / item-component.hbs
Created Nov 7, 2017
Item List and Item Component
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>