Coding for the Curious Crash Course - EmberJS resources

(0)index.hbs

<div class=”container”>
  <h1>Coding For The Curious Crash Course</h1>
</div>

(1)index.hbs

<div class="card">
  <div class="card-image">
    <img src="https://goo.gl/cctNRa" />
  </div>
  <div class="content">
    <div class="location">Gothenburg</div>
    <img class="avatar" src="https://avatars.io/twitter/thomasochman">
    <h1>Thomas Ochman</h1>
    <h2>Founder & Head Coach</h2>
    <h3>Currently at: Craft Academy</h3>
    <p>Just a programmer, not a Ninja...</p>
    <a href="mailto:thomas@craftacademy.se">thomas@craftacademy.se</a> |
    <a href="http://www.twitter.com/thomasochman">@thomasochman</a>
  </div>
</div>

(2)index.js

import Route from '@ember/routing/route';
export default Route.extend({

model() {
    return {
      name: 'Thomas Ochman',
      email: 'thomas@craftacademy.se',
      company: 'Craft Academy',
      role: 'Founder & Head Coach',
      twitter: 'thomasochman',
      location: 'Sweden',
      info: 'Just a programmer, not a Ninja...',
      image: 'https://goo.gl/cctNRa'
    }
  }
});

(3)index.hbs

<div class="card">
  <div class="card-image">
    <img src="{{model.image}}" />
  </div>
  <div class="content">
    <div class="location">{{model.location}}</div>
    <img class="avatar" src="https://avatars.io/twitter/{{model.twitter}}">
    <h1>{{model.name}}</h1>
    <h2>{{model.role}}</h2>
    <h3>Currently at: {{model.company}}</h3>
    <p>{{model.info}}</p>
    <a href="mailto:{{model.email}}">{{model.email}}</a> |
    <a href="http://www.twitter.com/{{model.twitter}}">@{{model.twitter}}</a>
  </div>
</div>

(4)application.js

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  host: 'https://ca-address-book.herokuapp.com',
  namespace: 'api'
});

(5)index.js

import Route from '@ember/routing/route';
export default Route.extend({

  model() {
    return this.store.findAll('contact');
  }
});

(6)contact.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  email: DS.attr('string'),
  company: DS.attr('string'),
  role: DS.attr('string'),
  twitter: DS.attr('string'),
  location: DS.attr('string'),
  info: DS.attr('string'),
  image: DS.attr('string')
});

(7)index.hbs

{{#each model as |contact|}}
  <div class="card">
    <div class="card-image">
      <img src="{{contact.image}}" />
    </div>
    <div class="content">
      <div class="location">{{contact.location}}</div>
      <img class="avatar" src="https://avatars.io/twitter/{{contact.twitter}}">
      <h1>{{contact.name}}</h1>
      <h2>{{contact.role}}</h2>
      <h3>Currently at: {{contact.company}}</h3>
      <p>{{contact.info}}</p>
      <a href="mailto:{{contact.email}}">{{contact.email}}</a> |
      <a href="http://www.twitter.com/{{contact.twitter}}">@{{contact.twitter}}</a>
    </div>
  </div>
{{/each}}