I18Next & Polymer: mise à jour des liaisons de données en cas de changement de langue

Question

Dans mon projet, j'utilise Polymer 1 et i18next (et i18next-xhr-backend) pour implémenter l'internationalisation. L'approche de base que j'ai suivie (voir ci-dessous) fonctionne très bien, mais lorsque l'utilisateur change de langue, les liaisons de données Polymer ne sont pas mises à jour.

L'approche actuelle est la suivante:

const i18next = require('i18next'); 
const i18nextXHRBackend = require('i18next-xhr-backend'); 

i18next 
    .use(i18nextXHRBackend) 
    .init({ 
    fallbackLng: ['en', 'default'], 
    debug: true, 
    backend: { 
     loadPath: '/locale/locales/{{lng}}.json', 
     crossDomain: false 
    } 
    }, function(err, t) { 
    console.log("Init done..."); 
}); 


if (!Polymer || !Polymer.Base) { 
    console.warn('CoolI18N needs Polymer to be loaded.'); 
} 
Polymer.CoolI18N = i18next; 
Polymer.Base._addFeature({ 
    myVeryCoolTranslationMethod: function(...params) { 
    return i18next.t(params); 
    } 
}); 

Et dans mes éléments que je tends les traductions comme

<div>[[myVeryCoolTranslationMethod('application.welcomeMessage')]]</div> 

ou par programmation via

Polymer.CoolI18N.t('application.welcomeMessage') 

Le problème est le suivant: quand je charger une nouvelle langue à l'exécution (comme de), il est chargé comme il se doit, mais les liaisons de données ne sont pas mises à jour et toutes les chaînes sont définies dans en ou default.

i18next déclenche un événement languageChanged je peux attraper comme ceci:

i18next.on('languageChanged', (newLang) => { 
    console.log("language changed to:", newLang); 
}); 

Et c'est exactement le point où Polymer a besoin de savoir quelque chose a changé ...

Est-il possible de réaliser, que ces les liaisons de données sont-elles notifiées? Je ne veux pas mettre à jour toutes les reliures manuellement ...

Merci d'avance!

Answer 1

Il s'agit globalement d'un problème de liaisons. Ils ne seront pas mis à jour à moins qu'ils ne soient supprimés du DOM et à nouveau insérés.

Dans mon application, j'ai 1 élément (appelons-le my-guidepost) qui se trouve en tant que root pour toute l'application (index.html n'est pas une bonne approche, car vous ne pouvez pas le retirer de DOM).

Parce que j'ai ma propre gestion des langues dans mon projet, j'ai un fichier où je gère tout ce qui est nécessaire pour les langues. (vous avez quelque chose de similaire, je suppose).

exemple de fonction pour changer la langue:

localStorage.setItem("lang-info", lang); 
this.text = this[lang]; 
document.body.removeChild(document.querySelector("my-guidepost")); 

setTimeout(() => { 
    var guidepost = document.createElement("my-guidepost"); 
    guidepost.id = "app"; 
    document.body.appendChild(guidepost); 
}, 500); 

Note: Je n'utilise pas shadow-dom

à cause de cela que je devais changer beaucoup de choses et ce qui est excellent pour résoudre avant votre projet commence expandng en quelque chose de plus gros. Par exemple, la ligne:

var guidepost = document.createElement("my-guidepost"); 

est la plus meurtrière. Essayez sur vous-même et vous verrez. Peut-être que tu as une meilleure architecture que moi. Mais si vous êtes dans la fonction ready pointant sur un élément DOM, il va lancer une erreur (parce que DOM n'était même pas configuré, seulement créé dans une variable).

Je suis là pour vous aider si vous rencontrez des problèmes.

Si vous avez besoin de plus d'informations demandez