Trouble understanding how observers work

@Maelstrom wrote:

Hello,

I recently started using Ember and, I thought I started getting a graps on the damn thing and now I am so confused...

Context: I am currently trying to implement multi language on my site, I am implementing intl.

I created a menu to select my locale:

{{view "select" 
      classNames="ui-language-selector"
      content=locales 
      optionValuePath="content.id" 
      optionLabelPath="content.text" 
      value=currentLocale
    }}

And my application controller:

export default Ember.Controller.extend({

  intl: Ember.inject.service('intl'),

  init() {
    this.set('currentLocale', this.get('intl.locale')[0]);
  },

  currentLocale: null,

  currentLocaleHasChanged: Ember.observer('currentLocale', function() {
    console.log('change');
    this.get('intl').setLocale(this.get('currentLocale'));
  }),

  locales: Ember.computed('intl.locales', function() {
    let locales = [];
    for(let loc of this.get('intl.locales')) {
      locales.push({
        id: loc,
        text: this.get('intl').t('language.' +loc)
      });
    }
    return locales;
  })

});

This works well, when I choose a new locale in my dropdown, the content is translated.

Now I want to do several other things when the locale (intl.locale) changes, hence, I wanted to add observer in that property:

Update my document's title (with ember-cli-document-title)

title: Ember.observer('intl.locale', function() {
    let path = this.controller.get('currentPath');
    return this.get('intl').t(path+'.title') +' - '+ this.get('intl').t('site.title');
  })

Does not work.

Another component doing stuff whilst changing locale:

export default Ember.Component.extend({

  intl: Ember.inject.service('intl'),

  localeHasChanged: Ember.oberver('intl.locale', function() {
    //Do something
  })

});

Does not work.

Am I missing something about observers? Services?

Thanks

Posts: 2

Participants: 2

Read full topic