I18Next & Polymer: Datenbindungen aktualisieren, wenn die Sprache geändert wurde

Question

In meinem Projekt verwende ich Polymer 1 und i18next (und i18next-xhr-backend), um die Internationalisierung zu implementieren. Der grundlegende Ansatz, den ich gemacht habe (siehe unten), funktioniert sehr gut, aber wenn der Benutzer die Sprache ändert, werden Polymer-Datenbindungen nicht aktualisiert.

Der derzeitige Ansatz ist wie folgt:

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

Und in meinem Elemente erreiche ich die Übersetzungen wie

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

oder programmatisch über

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

Das Problem ist: wenn ich eine neue Sprache zur Laufzeit laden (wie de), wird es geladen, wie es sollte, aber Die Datenbindungen werden nicht aktualisiert und alle Zeichenfolgen werden in en oder default festgelegt.

i18next feuert ein languageChanged Ereignis ich so fangen kann:

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

Und das ist genau der Punkt, an dem Polymer muss etwas geändert wissen ...

Gibt es eine Möglichkeit, zu erreichen, dass diese Datenbindungen werden benachrichtigt? Ich möchte nicht jede Bindung manuell aktualisieren ...

Vielen Dank im Voraus!

Answer 1

Dies ist global Problem der Bindungen. Sie werden nur aktualisiert, wenn sie aus dem DOM entfernt und erneut eingefügt werden.

In meiner Anwendung habe ich 1 Element (nennen wir es my-guidepost), die als root für ganze Anwendung steht (index.html ist nicht gut Ansatz, da Sie es nicht aus DOM entfernen können).

Da ich in meinem Projekt meinen eigenen Umgang mit Sprachen habe, habe ich eine Datei, in der ich alles Notwendige für Sprachen handhabe. (Sie haben etwas Ähnliches, denke ich).

Beispiel Funktion zum Ändern Sprache:

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

Anmerkung: Ich nicht shadow-dom

aus diesem Grunde verwende ich viele Dinge ändern musste und das ist großartig zu lösen, bevor Ihr Projekt beginnt expandng in etwas Größeres. Zum Beispiel Zeile:

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

ist die tödlichste. Versuchen Sie sich selbst und Sie werden sehen. Vielleicht hast du bessere Architektur als ich. Aber wenn Sie in der ready Funktion sind, die auf irgendein DOM Element zeigt, wirft es Störung (weil DOM nicht sogar aufgestellt wurde. Nur in irgendeiner Variablen hergestellt).

Ich bin hier, um Ihnen zu helfen, falls Sie auf einige Probleme stoßen.

Wenn Sie weitere Informationen benötigen, fragen Sie einfach