Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
time zones select
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);
},
},
});
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,
});
},
});
<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>
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);
import Ember from 'ember';
import DS from 'ember-data';
// 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);
});
}
export default Ember.Component.extend({
// Input
// -----
timeZone: null,
// Private properties
// ------------------
timeZones: null,
loadTimeZones: Ember.on('init', function() {
this.set('timeZones', DS.PromiseArray.create({
promise: getTimeZones()
}));
}),
// 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.[]', function() {
const timeZone = this.get('timeZone');
const timeZones = this.get('timeZones').mapBy('name');
return timeZones.indexOf(timeZone) === -1;
}),
// Actions
// -------
actions: {
changeOption(val) {
this.get('choose')(val);
},
}
});
{{#if timeZones.isFulfilled}}
<select onchange={{action "changeOption" value="target.value"}}>
<option value="" disabled selected={{noneSelected}}>
Select a time zone
</option>
{{#each timeZones as |tz|}}
<option value={{tz.name}} selected={{eq tz.name timeZone}}>
{{tz.label}}
</option>
{{/each}}
</select>
{{else if timeZones.isRejected}}
Error
{{else}}
Loading...
{{/if}}
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.