pocket-monsters

adapters.monster.js

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  host:'https://pokeapi.co',
  namespace: 'api/v2',
  
  pathForType() {
    return 'pokemon'; // because I used 'monster'
  },
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'pocket-monster routing example'
});

models.monster.js

import DS from 'ember-data';
import Ember from 'ember';

export default DS.Model.extend({
  number: Ember.computed('url', function() {
    var fullUrl = this.get('url');
    // https://jsfiddle.net/sheriffderek/0rLjraob/
    return fullUrl.split('/')[6]; // cheap way to find the monster id in the url?
    // maybe this should happen in a serializer?
  }),
  name: DS.attr(),
  slug: Ember.computed('name', function() {
    return this.get('name').dasherize();
  }),
  url: DS.attr(),
});

router.js

import Ember from 'ember';
import config from './config/environment';

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

Router.map(function() {
  this.route('monsters', { path: '/' }, function() {
  	this.route('monster-list', { path: '/' });
  	this.route('monster-detail', { path: '/:monsterId' });
	});
});

export default Router;

routes.monsters.error.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.monsters.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  model() {
    var monsterData = this.get('store').findAll('monster');
    console.log(monsterData);
    return monsterData;
  },
});

routes.monsters.loading.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.monsters.monster-detail.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  model(params) {
    var monster = this.store.peekRecord('monster', params.monsterId);
    // this is pointy... ? not sure - 
    // see the dynamic segment in the router
    // and see the link-to + the 'id' / number we're deriving from the model url
    console.log('incomming monster', monster);
    return monster;
  },

});

routes.monsters.monster-list.js

import Ember from 'ember';

export default Ember.Route.extend({
});

serializers.monster.js

import DS from 'ember-data';

export default DS.RESTSerializer.extend({

  primaryKey: 'url', // seems like 'number' would be good... but it's computed
  
  // are these parameters correct?
	normalizeResponse(store, primaryModelClass, payload, id, requestType) {
    payload = {
    	monster: payload.results,
    },
    console.log('payload', payload);
    console.log('id', id); // just curious
    return this._super(store, primaryModelClass, payload, id, requestType);
  },

});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>

{{outlet}}

templates.monsters.error.hbs

<h1>Error</h1>

<p>and..... an error route...</p>

{{link-to 'Monster list' 'monsters.monster-list'}}

templates.monsters.hbs

{{outlet}}

templates.monsters.loading.hbs

<h1>Loading</h1>

<p>Great time for a loading route...</p>

{{link-to 'Monster list' 'monsters.monster-list'}}

templates.monsters.monster-detail.hbs

{{link-to 'Monster list' 'monsters.monster-list'}}

<h2>/monster-detail/{{model.slug}}</h2>
(ideal url ^)
{{#unless model.name}}
  model data isn't getting to this route...
{{else}}
  <h3>{{model.name}}</h3>
  
  <ul>
    <li>name: {{model.name}}</li>
    <li>number: {{model.number}}</li>
    <li>slug: {{model.slug}}</li>
    <li>url: <a href="{{model.url}}" target='monster'>{{model.url}}</a></li>
  </ul>
{{/unless}}

templates.monsters.monster-list.hbs

<h2>/monster-list</h2>

<p>I'm not sure if it's the monster API or the in-twiddle situation / but the API takes a while - so, be patient. : )</p>

<ul class='monster-list'>
	{{#each model as |monster|}}
		<li>
      {{#link-to 'monsters.monster-detail' monster.id}}
      	{{!-- 
        	this works... but it's a really ugly url
      		maybe you can use this 'number' as an id somehow?
          ...
          even better would be to dasherish the moster name 
          and use it as slug (added that to the model)
        --}}
        {{monster.number}} {{monster.name}}
      {{/link-to}}
    </li>
	{{/each}}
</ul>

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}