Динамическая загрузка файла локали с помощью Requirejs

У меня есть одностраничное приложение Marionette, построенное на RequireJS, которое должно поддерживать переводы.

Моя цель - иметь файл словаря для каждого языка и, основываясь на конфигурации пользователя, вошедшего в систему, загрузить соответствующий файл.

Поскольку большинство пользователей будут использовать английский язык, я хочу связать словарь английского языка с приложением во время сборки (используя r.js).

Я написал небольшой модуль Translator, который в основном является оболочкой jed.js (библиотека, которую я использую для 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();
});

Как видите, данные локали загружаются из статического файла. Я хочу иметь возможность передать языковой стандарт конструктору переводчика и на его основе загрузить правильный файл JSON.

Как это можно сделать вместе с сохранением английского JSON в комплекте со встроенным проектом?


amd javascript internationalization requirejs js-amd
person elanh    schedule 27.10.2013    source источник

Ответы (2)


arrow_upward
4
arrow_downward

У вас должна быть возможность проверить пользовательские настройки, создать строку зависимости, передать ее переводчику, а затем использовать ее вместо localeData — r.js проигнорирует динамическую зависимость, но должен связать локаль EN.

if ( userLocale && userLocale !== 'en_US' ) {

    var localePath = 'json!locales/' + userLocale + '.json';
    require([ localePath ], function( locale ) {
        var translator = new Translator( locale );
    });

}

и внутри переводчика: "locale_data": passedData || englishData.

(или сделайте то же самое внутри модуля Translator, например if ( userLocale !== 'en_US' ) { require([path], function(locale) {...}))

Теоретически это должно работать, хотя здесь вы не можете использовать упрощенный CommonJS и должны использовать callback-require , иначе вы получите Имя модуля... еще не загружено для контекста ошибка.

person Stefan    schedule 27.10.2013
comment
Спасибо за ответ, но я сделал немного по другому. Вы можете увидеть мой ответ ниже - person elanh; 29.10.2013

arrow_upward
1
arrow_downward

Это решение, которое я в итоге сделал. Это сработало очень хорошо, и я также узнал об использовании $.Deferred, и это было здорово!

Ключевым для меня было использование плагина require text в качестве загрузчика в коде.

Локаль по умолчанию устанавливается как зависимость, таким образом, она также запекается в сборке.

Объяснения в коде ниже:

//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;
    });
    //...
});
person elanh    schedule 29.10.2013