Refresh current view/page after language change?

1

Hey everyone.

I have another question regarding a reload of the current visible content after the user makes a language switch. I currently use the same i18n handling like described by Robin Ward in this article Internationalization Support in Ember.js | Evil Trout’s Blog - I have a bunch of {{i18n bla}} all around my templates.

When I manually set the I18n.locale to another language and click on another view, it will show me the content with the new selected language.

My first try was to fire an action for the ApplicationRoute and there do a this.render() but it would only re-render the application template and no nested routes.

What would be a good solution to re-render the current view with all nested routes, components and views?

Cheers, Alcedo

1 Like
2

Have you tried rerender?

3

Rerender is not available on a Route only on a view. Would it make sense to rerender all views?

4

try this.refresh() refresh

2 Likes
5 
App.ApplicationRoute = Ember.Route.extend({
	actions: {
		switchlang: function(prop) {
			this.refresh();
		}
	}
});

leads to

Object has no method 'refresh'
6

You definitely use an old version. Could you update Ember to the latest version?

7

I was on 1.3.2 … :frowning:

BUT, I see that he goes though the route again but he does not rerender the View. I currently try something like this:

var views = Ember.View.views;
$.each(views, function( i, view ) {
	view.rerender();
});

It will rerender my application view but all subviews get destroyed.

1 Like
8

Unfortunately, refresh is not a good solution if your views have a certain complexity. See this issue, I’ve opened 1yr ago which is still not solved:

https://github.com/emberjs/ember.js/issues/2267

1 Like
9

Ha, I found the exact same problem. Funny. My current solution (which I do not like but it works)

actions: {
	switchlang: function(prop) {
		$.each(Ember.View.views, function( i, view ) {
			if (view.renderedName === "application"){
				view.rerender();
			}
		});
		route.transitionTo('loading');
		I18nLoadLangPromise().then(function(){
			route.transitionTo("index");
		}
	}
}

Not nice. I think about moving everything away from the application view to next level template which I can reload with the transitionTo(loading) and back to the view once the language is loaded.

10

I’ve recently stumbled upon this as well and @alcedo’s solution sort of worked for me, however why iterate over all my views, isn’t it more efficient to just target the toplevel view?

this.container.lookup('view:toplevel').rerender();
this.transitionTo('index');
11

I was searching for a way to do something equivalent to an onPageLoad in a non-SPA and found the following solution on StackOverflow. I thought I should share what I found in case it might help anyone else.

App.ApplicationController = Ember.Controller.extend({
  currentPathDidChange: function() {
    Ember.run.schedule('afterRender', this, function() {
      prettyPrint();
    });
  }.observes('currentPath')
});

DISCLAIMER: I’m still new to Ember, so I’m not sure if this is the right way to go about doing a “onPageLoad” equivalent, but this is working for me. I’d love for any feedback on a better way if there is one! Thanks!

StackOverflow - Observing Route Changes Ember Run Loop - Schedule Loop

12

ember-i18n has been re-rendering translations that were created via the t helper for a while now (since Oct 2015), from version 4.1.4, which is really neat.

1 Like