Javascript Girl
  1. Javascript Girl
  3. Configuration requise jS i18n locale dynamiquement
Intereting Posts
Fb login popup block Réinitialiser un contrôle de validation asp.net via javascript? Entrée de texte en toile HTML et arrière-plan Comment charger le tableau dans Datatables et le faire défiler jusqu'au dernier enregistrement automatiquement sur la charge Empêcher le défilement avec les touches fléchées Comment créer une application Web sans installation, côté client, base de données Comment obtenir des informations sur la clé qui a été pressée pendant combien de temps? Java basé XMPP chatclient en utilisant strophe js – Exemples et tutoriels? Rendre le même faux que le retour? Comment puis-je supprimer ou remplacer le contenu SVG? Relier plusieurs événements à un auditeur (sans JQuery)? Chargez dynamiquement les polices google après la chargement de la page Obtenir une erreur "La soumission du formulaire est annulée car le formulaire n'est pas connecté" Javascript – compare les dates en différents formats Est-il possible de positionner Highcharts dataLabels selon la valeur?

Configuration requise jS i18n locale dynamiquement

J'utilise le plugin RequireJS i18n pour charger des traductions dans ma demande. Je suis en train de lutter contre le concept de la détermination de l'exécution de la langue préférée d'un utilisateur .

Le plugin fonctionne bien si vous utilisez navigator.language pour déterminer la langue préférée de l'utilisateur, mais dans mon application, la langue de l'utilisateur est contenue dans une base de données sur le serveur. J'ai donc besoin de définir les paramètres régionaux au moment de l'exécution: 

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

Donc, ce dont j'ai besoin, c'est une manière intelligente de configurer userLocale avant que RequireJS ait chargé ma demande. Est-ce que quelqu'un sait ce qui serait le meilleur moyen d'y parvenir? Les possibilités comprennent:

1) Définir userLocale dehors de mon application, de manière non-AMD: 

 //run Ajax call to determine user's localization preferencess var Localization = Localization || getUserLocalization(); //and then... require.config({ config: { i18n: { locale: Localization.userLocale } } }); require(['app']);

Cela me rend un peu triste car cela signifie que certaines de mes applications seront en dehors de RequireJS et donc désordonnées. Cela signifie également que tous les paramètres de localisation de l'utilisateur (fuseau horaire de la langue, format de la date, format numérique) seront conservés dans l'espace de noms global.

2) Avoir un appel d'appel distinct pour récupérer les paramètres de localisation

Je ne sais pas comment cela fonctionne, mais peut-être: 

 var Localization = require(['localization']); require.config({ config: { i18n: { locale: Localization.userLocale } } }); require(['app']);

Peut-être que cela ne fonctionnerait pas en raison d'une asynchrone? De même, l' app n'aurait pas accès à l'objet Localization , donc il faudrait toujours l'enregistrer sous forme de variable globale.

Quelqu'un peut-il trouver une bonne solution à ce problème? Quelqu'un at-il utilisé le plugin RequireJS i18n pour faire quelque chose de similaire?

Il semble qu'après beaucoup de recherches, la meilleure solution pour résoudre ce problème consiste à vérifier localStorage pour une valeur locale . Si cela n'a pas encore été réglé, je charge l'application en utilisant une langue fictive: 

 var locale = localStorage.getItem('locale') || 'dummy'; require.config({ config: { i18n: { locale: locale } } }); require(['app']);

J'utilise une langue appelée dummy , définie dans un objet vide dans mon fichier nls. L'utilisation d'un mannequin, plutôt que d'une valeur par défaut, signifie que je n'ai pas à deviner ce que pourrait être la langue de l'utilisateur et je les obligerai potentiellement à télécharger une charge entière de traductions dans la mauvaise langue: 

 define({ "root": false, "dummy": {}, //dummy language with no translations if user language is unknown "fr": true, "en": true, "en-uk": true, "fr-fr": true });

Ensuite, lorsque l'application a été chargée et que l'utilisateur a été connecté, j'interroge la base de données en utilisant un appel de service, définissez la langue dans localStorage et rechargez l'application à l'aide de 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(); }

Bien sûr, j'ai besoin de supporter l'ancienne version d'IE, donc j'ai également inclus des userData utilisant userData , mais c'est l'essentiel de la solution.

Cette approche est partiellement prise de la façon dont les gars de RESTHub le font.

Une autre option, si votre page est générée dynamiquement avec un système de modèle, consiste à avoir require.config({config {..} }) dans le HTML généré … dis ça comme ceci: 

 <!-- 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 %>' // ie use PHP to insert user's preferred language } } }); require(['app']); // Call your main app here </script>

require.config(..) peut être appelé plusieurs fois, mais devrait être fait avant que votre application ne soit chargée.