I18Next & Polymer：当语言改变时更新数据绑定

Question

在我的项目中，我使用 Polymer 1 和 i18next（和 i18next-xhr-backend）来实现国际化。我所做的基本方法（见下文）效果很好，但是当用户更改语言时，Polymer 数据绑定不会更新。

目前的做法如下：

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

在我的元素中，我得到了类似的翻译

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

或以编程方式通过

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

问题是：当我在运行时加载一种新语言（如de）时，它会按原样加载，但数据绑定不会更新，所有字符串都设置在en 或default.

i18next 触发 languageChanged 事件，我可以像这样捕获：

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

而这正是 Polymer 需要知道发生了什么变化的地方......

有没有可能实现这些数据绑定得到通知？我不想手动更新每个绑定...

提前谢谢你！

Answer 1

这是全局绑定问题。除非将它们从 DOM 中移除并重新插入，否则它们不会得到更新。

在我的应用程序中，我有 1 个元素（我们称之为 my-guidepost）作为整个应用程序的根（index.html 不是好方法，因为您无法将其从 DOM 中删除）。

因为我在我的项目中有自己的语言处理，所以我有一个文件，我可以在其中处理语言所需的所有内容。 （我猜你有类似的东西）。

语言切换功能示例：

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

注意：我没有使用shadow-dom

因此，我不得不改变很多事情，在您的项目开始扩展到更大的东西之前解决这个问题非常好。例如行：

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

是最致命的。试试你自己，你会看到。也许你的建筑比我好。但是如果你在 ready 函数中指向某个 DOM 元素，它会抛出错误（因为 DOM 甚至没有设置。只在某个变量中创建）。

如果您遇到问题，我会在这里为您提供帮助。

如果您需要更多信息，请询问