Internationalization 余烬：动态切换到所选语言（使用i18n库）_Internationalization_Ember.js

Internationalization 余烬：动态切换到所选语言（使用i18n库）

internationalization ember.js

Internationalization 余烬：动态切换到所选语言（使用i18n库）,internationalization,ember.js,Internationalization,Ember.js,我正在使用ember-i18n库翻译整个应用程序中使用的静态字符串。由于语言文件相当大，我不想在应用程序启动时加载所有可能的语言词典。因此，我希望在用户选择更改语言时动态加载字典。我已经实现了第一个相当好的实现看启动应用程序时，将以英语呈现。现在，您可以选择其中一个视图（关于或信息），这些视图也以英语呈现。当您单击“Dutch”（荷兰语）时，荷兰语词典将被加载，应用程序将以正确的语言重定向到索引路由似乎只有当您转换到虚拟路由，然后返回到所需的路由时，才会使用新的语言字符串（在我的示例中，这

我正在使用ember-i18n库翻译整个应用程序中使用的静态字符串。由于语言文件相当大，我不想在应用程序启动时加载所有可能的语言词典。因此，我希望在用户选择更改语言时动态加载字典。我已经实现了第一个相当好的实现

看

启动应用程序时，将以英语呈现。现在，您可以选择其中一个视图（关于或信息），这些视图也以英语呈现。当您单击“Dutch”（荷兰语）时，荷兰语词典将被加载，应用程序将以正确的语言重定向到索引路由

似乎只有当您转换到虚拟路由，然后返回到所需的路由时，才会使用新的语言字符串（在我的示例中，这始终是“索引”）

我的问题：

这是重新加载view.template（转换到虚拟路由，然后激活转换到索引）的最佳方法吗

有没有办法转换回您请求语言更改的路线（需要使用get（path）之类的东西）

我还想翻译reddiv（应用程序出口）外部的字符串。我转换回索引，但在这种情况下，应用程序模板不会被重新绘制。。。原因可能是什么

当您离开模板，然后重新输入模板时，模板本身会使用所有语言字符串重新生成，这是预期的行为，还是仅当同时更改语言时才会发生这种行为？如何在控制台日志中跟踪具有新字符串的模板重建

有没有其他想法可以让它成为一个健壮的交换解决方案

我还没有在我的应用程序中进行翻译，但我计划这样做。所以我也想知道什么是最好的解决方案。我将描述我目前的想法，我将如何用我目前的知识来做这件事

1）我会将语言定义为一条顶级路线

App.Router.map(function() {
    this.resource('language', {path:'/language/:lang_code'}, function() {
        // All other routes
    });
});

然后，更改语言将是指向具有相应语言代码的语言路径的链接。我还将为此定义带有属性代码、名称、标志等的语言模型。这在显示语言选择按钮或下拉列表时也很方便

此外，在加载子例程模型时，您已经知道了语言是什么，并且可以用当前语言获取模型（例如，想想每种语言中不同的博客文章）。使用此.modelFor（'language'）获取任何子例程中的当前语言

2）这很棘手。AFAIK没有公共API来获取包含所有动态段的当前URL。应用程序控制器中有currentPath属性，但它不包括动态路由变量。还有一些余烬内部变量，但我不会使用它们，因为它们可能会改变。您还可以调查当前路由器url:this.get（'router.url'）。您还可以绕过余烬，使用window.location.href直接读取URL。但我不会在这上面花太多时间。用户很少更改他们的语言（通常仅在第一次访问时），并且在语言更改时重定向到索引路径也不是什么大问题。我会将它存储在cookie或本地存储器中，以后就不需要更改语言了。如果余烬想出了一个好的简单的方法，那么你可以很容易地添加这个功能以后

3）我不会把任何东西放入应用程序模板中，因为它没有翻译。使用语言模板而不是应用程序模板，然后在切换语言时应重新呈现所有内容

4）我认为文本不会自动更新，因为它们目前不是双向绑定的。但这很好，因为对所有文本进行双向绑定不是一个很好的主意，因为它会使系统变慢。所以只需将语言作为顶级路径，一切都应该正常工作：）

您可以利用视图的方法，这样您就不必切换到虚拟url：

updateLanguage: function(lang) {

    //Send xhr to get a dictionary for corresponding language
    this.getDictionary(lang).then(successCb, failureCb);

    //If dictionary was retrieved, set translations property and 
    function successCb(response) {
        Ember.I18n.translations = response;
        $.each(Ember.View.views, function(index, view) {
          view.rerender();
        });
    };

    function failureCb(response) {
        console.error('Dictionary for this language is not available');
    };
}

我尝试了这里列出的所有方法，但都有各种各样的问题。我找到了一种更优雅的方法来完成这项工作

警告：这仅在您使用Rails为Ember服务时有效（但可能适用于任何服务器端框架）

在Rails中，i18nJSGem与Rails默认区域设置集成。Ember中的动态切换是一个巨大的难题，因为当I18n.locale发生更改时，您必须手动重新绘制所有视图或重置应用程序以更新语言

我发现最好的方法是在Ember加载之前，使用Rails上设置的参数指定区域设置

轨道配置：

使您的余烬索引控制器操作如下所示：

def index
  if params[:locale]
    I18n.locale = params[:locale]
  end
end

<a href='/?locale=en'>English</a>
<a href='/?locale=es'>Spanish</a>
...etc...

然后在html模板中添加以下一行javascript：

<html>
  <head>
    <%= stylesheet_link_tag :application, :media => :all %>
    <%= stylesheet_link_tag    "application", 'http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,100,700' %>
    <%= stylesheet_link_tag    "application", 'http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic' %>
    <%= javascript_include_tag :application %>
    <title>Review Blaster 9000</title>

<!-- SET LOCALE USING RAILS PARAMETER PARSING -->
    <script>I18n.locale = '<%=I18n.locale%>';</script>
<!-- END SET LOCALE -->

  </head>
  <body>

<!-- Start Ember.js -->
      <%= yield %>
<!-- End Ember.js -->

  </body>
</html>


：全部%>
回顾Blaster 9000
I18n.locale=''；

然后在模板中指定语言切换器，如下所示：

def index
  if params[:locale]
    I18n.locale = params[:locale]
  end
end

<a href='/?locale=en'>English</a>
<a href='/?locale=es'>Spanish</a>
...etc...

等

点击这些链接将导致应用程序的完全刷新。Rails将解析参数，设置I18n，然后Ember将以预先设置的正确值开始，这样一切都将正确绘制。

好的建议。我将分析将语言定义为顶级路线的影响。不太确定这不会在其他地方造成摩擦。。。