[discus] REST API Example

adapters.application.js

import RESTAdapter from 'ember-data/adapters/rest';

export default RESTAdapter.extend({
  namespace: '/api'
});

adapters.page.js

import ApplicationAdapter from './application';

export default ApplicationAdapter.extend({
  pathForType() {
    return 'responce';
  },
  
  urlForFindAll() {
    return this.namespace + '/';
  }
});

controllers.ember-data.index.js

import Controller from '@ember/controller';
import { reads } from '@ember/object/computed';

export default Controller.extend({
  pages: reads('model')
});

controllers.ember-data.pages.js

import Controller from '@ember/controller';
import { reads } from '@ember/object/computed';

export default Controller.extend({
  pages: reads('model')
});

controllers.ember-data.posts.js

import Controller from '@ember/controller';
import { reads } from '@ember/object/computed';

export default Controller.extend({
  posts: reads('model')
});

controllers.xhr.index.js

import Controller from '@ember/controller';
import { reads } from '@ember/object/computed';

export default Controller.extend({
  pages: reads('model.responce')
});

controllers.xhr.posts.js

import Controller from '@ember/controller';
import { reads } from '@ember/object/computed';

export default Controller.extend({
  posts: reads('model.posts')
});

mirage.config.js

export default function() {

  this.get('/api/', () => {
    return {
      responce: [
        { id: 0, title: 'main', content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, aliquam.' },
        { id: 1, title: 'about', content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, obcaecati? Accusantium ex dolorum voluptate deleniti?' },
        { id: 2, title: 'contacts', content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptatibus exercitationem molestias rem.' }
      ]
    };
  });

  this.get('/api/posts', () => {
    return {
      posts: [
        { id: 0, name: 'First', content: 'Lorem ipsum dolor sit amet consectetur adipisicing.' },
        { id: 1, name: 'Second', content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quas quia distinctio ex consequuntur.' },
        { id: 2, name: 'Third', content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, similique. Voluptatum, libero sequi.' }
      ]
    };
  });

}

models.page.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';

export default Model.extend({
  title: attr('string'),
  content: attr('string')
});

models.post.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';

export default Model.extend({
  name: attr('string'),
  content: attr('string')
});

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('xhr', function() {
    this.route('posts');
  });
  this.route('ember-data', function() {
    this.route('posts');
  });
});

export default Router;

routes.ember-data.index.js

import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return this.store.findAll('page');
  }
});

routes.ember-data.posts.js

import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return this.store.findAll('post');
  }
});

routes.xhr.index.js

import Route from '@ember/routing/route';
import $ from 'jquery';

export default Route.extend({
  model() {
    return $.getJSON('/api/');
  }
});

routes.xhr.posts.js

import Route from '@ember/routing/route';
import $ from 'jquery';

export default Route.extend({
  model() {
    return $.getJSON('/api/posts');
  }
});

serializers.application.js

import RESTSerializer from 'ember-data/serializers/rest';

export default RESTSerializer.extend();

serializers.page.js

import ApplicationSerializer from './application';

export default ApplicationSerializer.extend({
  modelNameFromPayloadKey() {
    return 'page';
  },
});

templates.application.hbs

<div class="hack container">

  <NavBar as |nav|>
    <nav.item @route="xhr">XHR</nav.item>
    <nav.item @route="ember-data">Ember Data</nav.item>
  </NavBar>
  
  {{outlet}}
  
</div>

templates.components.loading-indicator.hbs

<p>
  <div class="loading"></div>
  Loading&hellip;
</p>

templates.components.nav-bar.hbs

<nav class="btn-group">
  {{yield (hash
    item=(component "nav-item")
  )}}
</nav>

templates.components.nav-item.hbs

{{#link-to @route
  tagName="button"
  class="btn btn-default btn-ghost"
  activeClass="btn-primary"
}}
  {{yield}}
{{/link-to}}

templates.ember-data.hbs

<h1>Ember Data Example</h1>

<NavBar as |nav|>
  <nav.item @route="ember-data.index">Pages</nav.item>
  <nav.item @route="ember-data.posts">Posts</nav.item>
</NavBar>

{{outlet}}

templates.ember-data.index-loading.hbs

<LoadingIndicator/>

templates.ember-data.index.hbs

<h2>Pages</h2>

<table>
  <thead>
    <tr><th>ID</th><th>Title</th><th>Content</th></tr>
  </thead>
  <tbody>
    {{#each pages as |page|}}
      <tr>
        <td><code>{{page.id}}</code></td>
        <td>{{page.title}}</td>
        <td>{{page.content}}</td>
      </tr>
    {{else}}
      <tr><td colspan="3"><center>No pages available</center></td></tr>
    {{/each}}
  </tbody>
</table>

templates.ember-data.posts-loading.hbs

<LoadingIndicator/>

templates.ember-data.posts.hbs

<h2>Posts</h2>

<table>
  <thead>
    <tr><th>ID</th><th>Name</th><th>Content</th></tr>
  </thead>
  <tbody>
    {{#each posts as |post|}}
      <tr>
        <td><code>{{post.id}}</code></td>
        <td>{{post.name}}</td>
        <td>{{post.content}}</td>
      </tr>
    {{else}}
      <tr><td colspan="3"><center>No posts available</center></td></tr>
    {{/each}}
  </tbody>
</table>

templates.index.hbs

<p>
  This twiddle is broken in to two examples: {{link-to "Native XHR" "xhr"}} and {{link-to "Ember Data" "ember-data"}}. Each has two child routes that demonstrate the <code>/</code> and <code>/posts</code> API endpoints.
</p>

templates.xhr.hbs

<h1>XMLHttpRequest Example</h1>

<NavBar as |nav|>
  <nav.item @route="xhr.index">Pages</nav.item>
  <nav.item @route="xhr.posts">Posts</nav.item>
</NavBar>

{{outlet}}

templates.xhr.index-loading.hbs

<LoadingIndicator/>

templates.xhr.index.hbs

<h2>Pages</h2>

<table>
  <thead>
    <tr><th>ID</th><th>Title</th><th>Content</th></tr>
  </thead>
  <tbody>
    {{#each pages as |page|}}
      <tr>
        <td><code>{{page.id}}</code></td>
        <td>{{page.title}}</td>
        <td>{{page.content}}</td>
      </tr>
    {{else}}
      <tr><td colspan="3"><center>No pages available</center></td></tr>
    {{/each}}
  </tbody>
</table>

templates.xhr.posts-loading.hbs

<LoadingIndicator/>

templates.xhr.posts.hbs

<h2>Posts</h2>

<table>
  <thead>
    <tr><th>ID</th><th>Name</th><th>Content</th></tr>
  </thead>
  <tbody>
    {{#each posts as |post|}}
      <tr>
        <td><code>{{post.id}}</code></td>
        <td>{{post.name}}</td>
        <td>{{post.content}}</td>
      </tr>
    {{else}}
      <tr><td colspan="3"><center>No posts available</center></td></tr>
    {{/each}}
  </tbody>
</table>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "ENV": {
    "ember-cli-mirage": { "enabled": true }
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "hack_css": "https://cdnjs.cloudflare.com/ajax/libs/hack/0.8.0/hack.css",
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-cli-mirage": "0.4.9"
  }
}