Example: Language Chooser

In this example, we build a menu that lets users select their language.

// app/language-select/component.js
import Ember from 'ember';

export default Ember.Component.extend({
  i18n: Ember.inject.service(),
  classNames: ['language-select'],

  locales: Ember.computed('i18n.locale', 'i18n.locales', function() {
    const i18n = this.get('i18n');
    return this.get('i18n.locales').map(function (loc) {
      return { id: loc, text: i18n.t('language-select.language.' + loc) };
    });
  }),

  actions: {
    setLocale() {
      this.set('i18n.locale', this.$('select').val());
    }
  }
});

{{!-- app/language-select/template.hbs --}}
<select {{action 'setLocale' on='change'}}>
  {{#each locales as |loc|}}
    <option value="{{loc.id}}" selected={{is-equal loc.id i18n.locale}}>
      {{loc.text}}
    </option>
  {{/each}}
</select>

// app/helpers/is-equal.js
import Ember from "ember";

export default Ember.Helper.helper(function([leftSide, rightSide]) {
  return leftSide === rightSide;
});