New Twiddle

components.lq-select.js

import Ember from 'ember'

const { Component } = Ember

export default Component.extend({
  // properties
  options: undefined,
  selectedOption: undefined,
  onChange: undefined,
})

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.index.detail.js

import Ember from 'ember'

const { Controller } = Ember

export default Controller.extend({
  actions: {
    changeDoggoBreed(doggoBreed) {
      this.transitionToRoute(`index.detail`, doggoBreed)
    }
  },
})

helpers.is-equal.js

import Ember from 'ember';

export function isEqual([a, b]/*, hash*/) {
  return a === b;
}

export default Ember.Helper.helper(isEqual);

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(`index`, { path: `/` }, function () {
  	this.route(`overview`, { path: `/` })
    this.route(`detail`, { path: `/:breed` })
  })
})

export default Router

routes.index.detail.js

import Ember from 'ember';

const { Route, get } = Ember

export default Route.extend({
  ajax: Ember.inject.service(),
  model({ breed }) {
    const ajax = get(this, `ajax`)
    return Ember.RSVP.hash({
      doggoBreeds: this.modelFor(`index`),
      doggoBreed: breed,
      doggoBreedPic: ajax.request(
      	`https://dog.ceo/api/breed/${breed}/images/random`,
      ).then(result => result.message)
    })
  },
})

routes.index.js

import Ember from 'ember'

const { Route, get, A: EmberArray } = Ember

export default Route.extend({
  ajax: Ember.inject.service(),
  model() {
     return get(this, `ajax`)
       .request(`https://dog.ceo/api/breeds/list`)
    	.then(result => EmberArray(result.message))
  },
})

routes.index.overview.js

import Ember from 'ember';

const { Route, get } = Ember

export default Route.extend({
  ajax: Ember.inject.service(),
  model() {
    return this.modelFor(`index`) // use model of the parent route
  }
});

templates.application.hbs

<h1>Welcome to the doggo demo</h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.lq-select.hbs

<select
 onchange={{action onChange value="target.value"}}
>
	{{#each options as |option|}}
    <option
      value={{option}}
      selected={{is-equal selectedOption option}}
    >
      {{option}}
    </option>
  {{/each}}
</select>
{{yield}}

templates.index.detail.hbs

This is the detail template. The current doggo race is {{model.doggoBreed}}.
<br>
<br>
<br>
{{#link-to "index"}}Go back{{/link-to}}
<br>
<br>
We also have all doggo breeds here for quick navigation :)
{{lq-select
  options=model.doggoBreeds
  selectedOption=model.doggoBreed
  onChange=(action "changeDoggoBreed")
}}


<br>
This is a picture of that doggo  <br><img src={{model.doggoBreedPic}}>

templates.index.hbs

This is the index route template. The index route fetches the doggo races.<br>
Yuu no trust me? This is the first doggo breed: {{model.firstObject}}
<br>
<br>
{{outlet}}

templates.index.overview.hbs

This is the overview template. It uses the model of the parent route (index) via this.modelFor('index').
<br> Here is a list of doggo breeds:
<br>
<ul>
  {{#each model as |doggoBreed|}}
    <li>
    	{{#link-to "index.detail" doggoBreed}}
      	{{doggoBreed}}
      {{/link-to}}
    </li>
  {{/each}}
</ul>

twiddle.json

{
  "version": "0.12.1",
  "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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-ajax": "3.0.0"
  }
}