动态设置RequireJS i18n语言环境

Question

我正在使用RequireJS i18n plugin将翻译加载到我的应用程序中。我正在努力解决运行时确定用户首选语言的概念。

如果您使用navigator.language确定用户的首选语言，该插件可以正常运行，但在我的应用中，用户的语言保存在服务器上的数据库中。所以我需要在运行时设置语言环境：

require.config({
    config: {
        i18n: {
            locale: userLocale
        }
    }
});

所以我需要的是在之前设置userLocale 的聪明方法.UseJS已加载我的应用程序。有谁知道最好的方法是什么？可能性包括：

1）以非AMD方式在我的应用程序之外设置userLocale：

//run Ajax call to determine user's localization preferencess
var Localization = Localization || getUserLocalization(); 

//and then...
require.config({
    config: {
        i18n: {
            locale: Localization.userLocale
        }
    }
});

require(['app']);

这让我有点难过，因为这意味着我的一些应用程序将在RequireJS之外，因此不整洁。它还意味着所有用户的本地化设置（语言时区，日期格式，数字格式）将保存在全局命名空间中。

2）进行单独的require调用以检索本地化设置

我不确定这是如何工作的，但也许是：

var Localization = require(['localization']);

require.config({
    config: {
        i18n: {
            locale: Localization.userLocale
        }
    }
});

require(['app']);

由于异步性，这可能不起作用？此外，app无法访问Localization对象，因此仍需将其存储为全局变量。

有谁能看到这个问题的好方法？有没有人使用RequireJS i18n插件做类似的事情？

Answer 1

经过大量研究后，解决此问题的最佳方法是检查localStorage的{​​{1}}值。如果尚未设置，我使用虚拟语言加载应用程序：

locale

我使用一种名为var locale = localStorage.getItem('locale') || 'dummy'; require.config({ config: { i18n: { locale: locale } } }); require(['app']); 的语言，设置为我的nls文件中的空对象。使用虚拟而不是默认，意味着我不必猜测用户的语言可能是什么，并可能强迫他们用错误的语言下载大量翻译：

dummy

然后，当应用程序加载并且用户已登录时，我使用服务调用查询数据库，在define({ "root": false, "dummy": {}, //dummy language with no translations if user language is unknown "fr": true, "en": true, "en-uk": true, "fr-fr": true }); 中设置语言并使用localStorage重新加载应用程序：

location.reload()

当然，我需要支持旧版本的IE，所以我还使用 //retrieve user object (including preferred locale) from service call user = getUserObject(userId); locale = localStorage.getItem('locale'); if (!locale || locale !== user.locale) { localStorage.setItem('locale', user.locale); //reload the app location.reload(); } 包含了回退，但这是解决方案的要点。

这种方法部分取决于RESThub的人如何做到这一点。

Answer 2

如果您的页面是使用模板系统动态生成的，那么另一个选项是将require.config({config {..} })内联到生成的HTML中......如下所示：

<!-- load require.js -->
<script src="js/lib/require.js"></script>
<!-- standard config options in this file -->
<script src="js/config.js"></script>
<!-- user specific config inlined in the Dynamic HTML -->
<script>
  // now set the user's preferred locale
  require.config({
    config : { 
      i18n: {
        locale: '<% user.locale %>' // i.e. use PHP to insert user's preferred language
      }
    }
  });
  require(['app']); // Call your main app here
</script>

require.config(..)可以多次调用，但应该在加载应用之前完成。