Re-rendering ApplicationView with output

Question

Short version of this question: I'm trying to re-render my ApplicationView when a specific event (language change) occurs. ApplicationView only contains a simple outlet, however, when re-rendering, this outlet remains empty. So what is the right approach for reprocessing an entire page?

Simplified application code (http://jsfiddle.net/6ZQh7/2/):

Ember.Handlebars.registerHelper('t', function() { return App.get('language') == 'en' ? 'Hi there!' : 'Hallo!'; }); App = Ember.Application.create({ language: 'en', ApplicationView: Em.View.extend({ templateName: 'application' }), TestView: Em.View.extend({ templateName: 'test' }), ApplicationController: Em.Controller.extend(), Router: Em.Router.extend({ root: Em.Route.extend({ toggleLanguage: function(router) { App.set('language', App.get('language') == 'en' ? 'nl' : 'en'); // view.parentView resolves to the ApplicationView router.get('applicationController.view.parentView').rerender(); }, index: Em.Route.extend({ route: '/', connectOutlets: function(router) { router.get('applicationController').connectOutlet('test') } }) }) }) }); 

Relevant HTML:

 <script type="text/x-handlebars" data-template-name="application"> <h1>{{t whatever}}</h1> {{outlet}} </script> <script type="text/x-handlebars" data-template-name="test"> <h2>My Test Page</h2> <a href="#" {{action toggleLanguage}}>Toggle language.</a> </script> 

By doing some debugging (well, some, a few hours), it seems that when you re-render the ContainerView, which displays the output, has no context, which means there is no currentView (which is attached to this context), which means nothing is displayed in the socket. Scratch what a working context is; if I call this.get('templateData.keywords.view.context') in ContainerView # init with a debugger, I get a controller application. Interestingly, however, this.get('templateData.keywords.view.context.view') (which should return the view to exit) returns undefined, whereas `this.get ('templateData.keywords.view.context'). Get ('view') returns the image.

Context: I'm trying to write an internationalized Ember.js application that contains a simple translation helper that prints strings in the current language (shared with Ember-I18n). Currently changing the language requires reloading the page, because these language strings are not connected (and I would justly say that, since changing the language is rare and creating bindings for each line on the page sounds like a bad idea). However, I would like to simply re-render instead of rebooting.

Answer 1

I kind of give a basic approach, Create a language Objects as in ...

 App.Languages = {}; App.availableLanguages = Em.A([App.Languages.En, App.Languages.Pirate]); App.Languages.En = Em.Object.extend({ languageName: "English", appName: "My application Name" }) App.Languages.Pirate = Em.Object.extend({ languageName: "Pirate", appName: "!!!Zzzz" }) App.set('language', App.Languages.En); 

Hand tool assistant

 Em.Handlebars.registerHelper('loc', function(key){ currentLanguage = Ember.get('language'); value = currentLanguage.get('key'); return Ember.String.htmlSafe(value); }) 

Using:

 {{loc appName}} 

Change the language: Drop-down list at the top of the page, as in

 {{Ember.Select contentBinding=App.availableLanguages optionValuePath="content" optionLabelPath="content.languageName" selectionBinding="App.language"}} 

Therefore, when the language changes, thanks to the ember binding, the value is updated :)

Answer 2

I solved the same problem by adding an observer method to the application view, which listens for changes in the language settings, and if it detects a change, overrides the view using the rerender () method.

I have a language controller:

 FLOW.languageControl = Ember.Object.create({ dashboardLanguage:null, content:[ Ember.Object.create({label: "English", value: "en"}), Ember.Object.create({label: "Dutch", value: "nl"}), Ember.Object.create({label: "Spanish", value: "sp"}), Ember.Object.create({label: "French", value: "fr"})], changeLanguage:function(){ locale=this.get("dashboardLanguage.value"); console.log('changing language to ',locale); if (locale == "nl") {Ember.STRINGS=Ember.STRINGS_NL;} else if (locale == "fr") {Ember.STRINGS=Ember.STRINGS_FR;} else if (locale == "sp") {Ember.STRINGS=Ember.STRINGS_SP;} else {Ember.STRINGS=Ember.STRINGS_EN;} }.observes('dashboardLanguage') }); 

with a dropdown in the handlebars file:

 <label>Dashboard language: {{view Ember.Select contentBinding="FLOW.languageControl.content" optionLabelPath="content.label" optionValuePath="content.value" selectionBinding="FLOW.languageControl.dashboardLanguage" }} </label> 

And a (simplified) kind of navigation that displays top navigation:

 FLOW.NavigationView = Em.View.extend({ templateName: 'navigation', selectedBinding: 'controller.selected', onLanguageChange:function(){ this.rerender(); }.observes('FLOW.languageControl.dashboardLanguage'), }); 

When navViewView detects a language change (which was caused by the user choosing a language from Dropbox), the navigation menu is overwritten.

You can do the same in the application view, I just need the navigation view to be overwritten.