动态设置RequireJS i18n语言环境 [英] Setting RequireJS i18n locale dynamically

问题描述

我正在使用 RequireJS i18n插件将翻译加载到我的应用程序中.我正在为运行时确定用户的首选语言这一概念而苦苦挣扎.

I am using the RequireJS i18n plugin to load translations into my application. I'm struggling with the concept of runtime determination of a user's preferred language.

如果您使用navigator.language确定用户的首选语言，则该插件效果很好，但是在我的应用程序中，该用户的语言保存在服务器上的数据库中.所以我需要在运行时设置语言环境:

The plugin works well if you're using navigator.language to determine the user's preferred language, but in my app, the user's language is held in a database on the server. So I need to set the locale at runtime:

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

因此，我需要一种巧妙的方法来设置userLocale 之前 RequireJS加载我的应用程序.有谁知道实现此目标的最佳方法是什么?可能性包括:

So what I need is a clever way of setting userLocale before RequireJS has loaded my application. Does anyone know what would be the best way to achieve this? Possibilities include:

//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之外，因此不整洁.这也意味着所有用户的本地化设置(语言时区，日期格式，数字格式)都将保留在全局名称空间中.

This makes me a little bit sad as it means some of my application will be outside of RequireJS, and thus untidy. It also means all the user's localization settings (language timezone, date format, numeric format) will be held in the global namespace.

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

I'm not sure how this work, but perhaps:

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

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

require(['app']);

由于异步性，这也许行不通吗?此外，app将无法访问Localization对象，因此仍需要将其存储为全局变量.

Perhaps this wouldn't work due to asynchronousness? Also the app would not have access to the Localization object, so it would still need to be stored as a global variable.

任何人都可以找到解决此问题的好方法吗?有没有人使用RequireJS i18n插件执行类似的操作?

Can anyone see a good solution to this problem? Has anyone used the RequireJS i18n plugin to do something similar?

推荐答案

似乎经过大量研究，解决此问题的最佳方法是检查localStorage的locale值.如果尚未设置，我将使用虚拟语言加载应用程序:

It seems after a lot of research, the best approach for solving this problem is to check localStorage for a locale value. If this hasn't been set yet, I load the application using a dummy language:

var locale = localStorage.getItem('locale') || 'dummy';

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

require(['app']);

我使用一种称为dummy的语言，在我的nls文件中将其设置为空对象.使用虚拟的而不是默认的，意味着我不必猜测用户的语言是什么，并有可能迫使他们以错误的语言下载全部翻译:

I use a language called dummy, set to an empty object in my nls file. Using a dummy, rather than a default, means I don't have to guess what the user's language might be, and potentially force them to download a whole load of translations in the wrong language:

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()重新加载应用程序:

Then, when the app has loaded and the user has been logged in, I query the database using a service call, set the language in localStorage and reload the app using location.reload():

    //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();
    }

当然，我需要支持IE的旧版本，因此我还包括了使用userData的后备功能，但这是解决方案的要旨.

Of course, I need to support old version of IE so I have also included fallbacks using userData, but this is the gist of the solution.

这种方法部分取材于 RESThub 完成.

This approach is partially taken from how the guys at RESThub do it.

这篇关于动态设置RequireJS i18n语言环境的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！