Rectangle 27 0

Another option, if your page is dynamically generated with a template system, is to have the require.config({config {..} }) inlined into the generated HTML... say like this:

<!-- 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(..) can be called multiple times, but should be done before your app is loaded.

Thanks Troy. In my use case, all interaction with the data layer happens through AJAX calls to RESTful APIs, but this might help someone whose HTML is generated on the server.

javascript - Setting RequireJS i18n locale dynamically - Stack Overflo...

javascript internationalization requirejs
Rectangle 27 0

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']);

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

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

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.

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

javascript - Setting RequireJS i18n locale dynamically - Stack Overflo...

javascript internationalization requirejs
Rectangle 27 0

locale

r.js will only use the first configuration it recognizes in a file. So you may be able to just split your single requirejs.config call into a static and dynamic part and leave them in the same file.

javascript - Requirejs optimizer and locale setting that is set dynami...

javascript gruntjs requirejs r.js grunt-contrib-requirejs