javascript - 使用 outlet 重新渲染 ApplicationView

Question

这个问题的简短版本:我正在尝试在特定事件发生(语言更改)时重新呈现我的 ApplicationView。 ApplicationView 只包含一个简单的导出，但是在重新渲染时这个导出仍然是空的。那么，重新呈现整个页面的正确方法是什么？

简化的应用程序代码(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')
                }
            })
        })
    })
});

对应的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>

做一些调试(好吧，一些；几个小时)，似乎当重新渲染发生时，渲染导出的 ContainerView 没有上下文，这意味着没有 currentView(这绑定(bind)到此上下文)，这意味着 socket 中根本没有呈现任何内容。 从头开始​​，有一个工作上下文；如果我使用调试器在 ContainerView#init 中调用 this.get('templateData.keywords.view.context')，我会得到 applicationcontroller。有趣的是，this.get('templateData.keywords.view.context.view')(应该返回 outlet 的 View )返回 undefined，而 `this.get('templateData.keywords .view.context').get('view') 确实返回 View 。

上下文:我正在尝试编写一个国际化的 Ember.js 应用程序，其中包含一个简单的翻译助手，以当前设置的语言输出字符串(与 Ember-I18n 结合使用)。目前更改语言需要重新加载页面，因为这些语言字符串是未绑定(bind)的(我会正确地说，因为语言更改很少见，并且为页面上的每个字符串创建绑定(bind)听起来是个坏主意)。但是，我只想重新渲染而不是重新加载。

Answer 1

我有点给出基本方法，创建语言对象，如...

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);

Handlebars 助手

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

用法:

{{loc appName}}

更改语言:页面顶部的下拉菜单

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

因此，当一种语言发生变化时，由于 ember 绑定(bind)，值得到更新:)