StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PORe-rendering ApplicationView with outlet
text
Body
copied!<p>Short version of this question: I'm trying to re-render my ApplicationView when a specific event happens (a language change). The ApplicationView only contains a simple outlet, however on re-rendering this outlet remains empty. So, what is the correct approach to re-render an entire page?</p> <p>Simplified application code (http://jsfiddle.net/6ZQh7/2/):</p> <pre><code>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') } }) }) }) }); </code></pre> <p>Corresponding HTML:</p> <pre><code><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> </code></pre> <p>Doing some debugging (well, some; a few hours of it), <s>it seems that when the re-render occurs, the ContainerView that renders the outlet doesn't have a context, which means no currentView (which is bound to this context), which means nothing is rendered in the outlet at all.</s> Scratch that, there is a working context; if I call <code>this.get('templateData.keywords.view.context')</code> in ContainerView#init using the debugger, I get the applicationcontroller. Interestingly enough though, <code>this.get('templateData.keywords.view.context.view')</code> (which should return the view for the outlet) returns undefined, whereas `this.get('templateData.keywords.view.context').get('view') <em>does</em> return the view.</p> <p>Context: I'm trying to write an internationalized Ember.js app, which contains a simple translation helper outputting strings in the currently set language (used in conjunction with Ember-I18n). Currently changing the language requires a reload of the page, as these language strings are unbound (and I would say rightfully so, as language changes are rare and creating bindings to every string on the page sounds like a bad idea). However, I'd like to just re-render instead of reload.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload