使用Requirejs动态加载区域设置文件 [英] Load Locale File Dynamically using Requirejs

问题描述

我有一个基于RequireJS的单页Marionette应用程序需要支持翻译。

I have a single page Marionette app built on RequireJS which needs to support translations.

我的目标是为每种语言提供一个字典文件，并基于登录用户的配置，加载相关文件。

My goal is to have a dictionary file for each language, and based on the logged in user's configuration, load the relevant file.

由于大多数用户将使用英语，我想在构建期间在应用程序中捆绑英语词典（使用r。 js）。

Since most of the users will use English, I want to bundle the English dictionary in the app during build (using r.js).

我写了一个小的翻译模块，它基本上包装了jed.js（我用于i18n的库）：

I wrote a small Translator module, which basically wraps jed.js (the library I'm using for i18n):

//in myTranslator.js
define(function (require) {
    "use strict";

    var Jed = require("jed");
    var localeData = require("json!locales/en_US.json");

    var Translator = function () {
        var i18n = new Jed({
            "domain": "messages",
            "locale_data": localeData
        });
        return i18n;
    };
    return Translator;
});

//in app.js
define(function(require){
    var Translator = require("myTranslator");
    var translator = new Translator();
});

如您所见，语言环境数据是从静态文件加载的。
我希望能够将语言环境传递给Translator构造函数，并在此基础上加载正确的JSON文件。

As you can see, the locale data is loaded from a static file. I want to be able to pass in the locale to the Translator constructor, and based on that, load the correct JSON file.

如何做到这一点与保留与建成项目捆绑的英语JSON一起？

How can that be done together with keeping the English JSON bundled with the built project?

推荐答案

这是我最终做的解决方案。
它非常好用，我也学会了使用$ .Deferred这很棒！

This is the solution I ended up doing. It worked out quite nicely, and I also learnt about using $.Deferred which was great!

我的关键是使用require text插件作为代码中的加载器。

The key for me was using the require text plugin as a loader in the code.

默认语言环境被设置为依赖项，这样它也可以在构建中烘焙。

The default locale is set as a dependency, that way it's baked in the build as well.

解释在以下代码中：

//in translator.js
define(function (require) {
    "use strict";

    var $ = require("jquery");
    var _ = require("underscore");
    var Jed = require("jed");
    var text = require("text");
    var defaultDictionary = require("json!locales/en_US.json");

    var Translator;

    Translator = (function () {
        var DEFAULT_LOCALE = "en_US";
        var defaultLocaleData = {
            locale: DEFAULT_LOCALE,
            dictionary: defaultDictionary
        };

        var createTranslator = function (localeData) {
            //create the actual Jed instance with the relevant dictionary
            var i18n = new Jed({
                "domain": "messages",
                "locale_data": localeData.dictionary
            });
            return i18n;
        };
        var parseLocaleDictionary = function (locale, dictionary) {
            //parse the dictionary JSON string loaded by text plugin...
            //handle errors in parsing if needed
        };
        //get to work here
        var getTranslatorForLocale = function (locale) {
            //$gettingData promise will be resolved when data for Jed is loaded and ready
            var $gettingData = $.Deferred();
            //$creatingTranslator promise will be returned to caller and will be resolved when everything's done
            var $creatingTranslator = $.Deferred();

            if (!locale || locale === DEFAULT_LOCALE) {
                //default locale, so resolve right away because we required it already
                $gettingData.resolve(defaultLocaleData);
            }
            else {
                //need to load the dictionary from here
                var dictionaryUrl = require.toUrl("locales/" + locale + ".json");
                //this is the dynamic loading
                text.get(
                    dictionaryUrl,
                    function (dictionary) {
                        //if successful, parse the JSON string and use that dictionary
                        var localeData = parseLocaleDictionary(locale, dictionary);
                        $gettingData.resolve(localeData);
                    },
                    function (error) {
                        //on load error, use the default and resolve promise
                        $gettingData.resolve(defaultLocaleData);
                    });
            }

            //once the data is ready, we can create the translator instance
            $gettingData.done(function (localeData) {
                var i18n = createTranslator(localeData);
                //notify caller that translator is ready
                $creatingTranslator.resolve(i18n);
            });

            return $creatingTranslator.promise();
        };

        return {
            //this function is returned to the user of Translator
            getTranslator: function (locale) {
                var $gettingTranslator = getTranslatorForLocale(locale);
                return $gettingTranslator;
            }
        };
    }());

    return Translator;
});
//in app.js
define(function (require) {
    var Translator = require("translator");
    //in app.js
    var myTranslator;
    var userLocale = "fr_FR";
    //this is a promise that will be resolved when translator is ready
    var $getTranslator = Translator.getTranslator(userLocale);
    //when translator is ready, store it
    $getTranslator.done(function (translator) {
        myTranslator = translator;
    });
    //...
});

这篇关于使用Requirejs动态加载区域设置文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！