New Twiddle

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  model: null,
  
  actions: {
    // This is fired when the user selects a new time zone
    // from the dropdown.
    changeTimeZone(tz) {
      this.set('model.timeZone', tz);
    },
  },
});

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    // In reality the model would be a bigger form object of
    // some kind... Here it just has a timeZone property.
    return Ember.Object.create({
      timeZone: null,
    });
  },
});

application.template.hbs

<p>
	{{select-time-zone
    timeZone=model.timeZone
    choose=(action "changeTimeZone")}}
</p>

<p>
	{{select-time-zone
    timeZone=model.timeZone
    choose=(action "changeTimeZone")}}
</p>

<p>
	{{#if model.timeZone}}
    The currently selected time zone is {{model.timeZone}}.
  {{else}}
  	No time zone selected.
  {{/if}}
</p>

helpers.eq.js

import Ember from 'ember';

// Get this from ember-truth-helpers! Invaluable addon.

export function eq([a, b]) {
  return a === b;
}

export default Ember.Helper.helper(eq);

select-time-zone.component.js

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



export default Ember.Component.extend({
  // Input
  // -----
  
  timeZone: null,
  
  // Injected properties
  // -------------------
  
  timeZones: Ember.inject.service(),

  // Computed properties
  // -------------------

  // Is none of the time zones currently selected? This can
  // happen either because the selected timeZone is blank,
  // or if it has a value not in the timeZones array.
  noneSelected: Ember.computed('timeZone', 'timeZones.all.[]', function() {
    const timeZone = this.get('timeZone');
    const timeZones = this.get('timeZones.all').mapBy('name');
    return timeZones.indexOf(timeZone) === -1;
  }),
  
  // Actions
  // -------
  
  actions: {
    changeOption(val) {
      this.get('choose')(val);
    },
  }
});

select-time-zone.template.hbs

{{#if timeZones.isFulfilled}}
	<select onchange={{action "changeOption" value="target.value"}}>
  	<option value="" disabled selected={{noneSelected}}>
    	Select a time zone
    </option>
    {{#each timeZones.all as |tz|}}
    	<option value={{tz.name}} selected={{eq tz.name timeZone}}>
        {{tz.label}}
      </option>
    {{/each}}
  </select>
{{else if timeZones.isRejected}}
  Error
{{else}}
	Loading...
{{/if}}

services.time-zones.js

import Ember from 'ember';

// Imagine this does an Ajax request. Returns a promise
// resolving to an array of time zones as seen below.
function getTimeZones() {
  return new Ember.RSVP.Promise(function(resolve, reject) {
    // Simulate network lag.
    Ember.run.later(function() {
      resolve([
        {
          name: 'America/Los_Angeles',
          label: 'Pacific Time (US & Canada)'
        },
        {
          name: 'America/Chicago',
          label: 'Central Time (US & Canada)'
        }
      ]);
    }, 1000);
  });
}

// A single instance of this service persists across any
// components/routes/controllers/whatever that inject it
// into themselves. This way we only need to fetch the
// time zones a single time.
export default Ember.Service.extend({
  all: Ember.computed(function() {
    return DS.PromiseArray.create({
      promise: getTimeZones()
    });
  }),

  isFulfilled: Ember.computed.alias('all.isFulfilled'),
  isRejected: Ember.computed.alias('all.isRejected'),
});

twiddle.json

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