Ember.js re-render links on locale change

Question

My application uses the ember-i18n addon. For SEO purposes, I wanted to put a /[lang-code]/ in the URL.

When changing the language, history.pushState can change the URL and its alright, but the links on the page do not change for the new language, even though router.rootURL is changed.

So far I can just change the window.location.pathname, but thus a new network request is being made.

I tried overriding the href-to helper (from ember-href-to addon) and added this:

_recomputeOnLocaleChange: Ember.observer('i18n.locale', function() {
    console.log("here?");
    this.recompute();
})

It executes on locale change, but apparently recompute does nothing. Even with setTimeout (because perhaps rootURL didn't change yet). Links are all the same.

Can you suggest anything? Would be greatly appreciated! Thank you!!

score 0 · Answer 1 · answered Feb 15 '18 at 22:44

In the didTransition hook of your router.js file, check if the locale has changed and set a property on a service to the new locale if it has. Then in your helper, you can check that property.

In router.js:

oldI18nLocale: null,

didTransition() {
  this._super(...arguments);

  // ...

  let i18nLocale = this.get('locale.i18n');
  if (i18nLocale !== this.get('oldI18nLocale')) {
    this.set('someService.i18nlocale', this.get('locale.i18n');
  }
  this.set('oldI18nLocale', i18nLocale));
}

In your helper:

recomputeOnLocaleChange: Ember.observer('someService.i18nLocale', function() {
    this.recompute();
})

Hope this works.

Ember.js re-render links on locale change

1 Answers1