Data binding I18Next&；聚合：在语言更改时更新数据绑定

在我的项目中，我使用Polymer 1和

i18next

（和

i18next xhr后端

）来实现国际化。我所做的基本方法（见下文）非常有效，但当用户更改语言时，聚合数据绑定不会得到更新

目前的做法如下：

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>

问题是：当我在运行时加载一种新语言（如

de

）时，它会按应该的方式加载，但数据绑定不会更新，所有字符串都在

en

或

默认值中设置

i18next
触发一个
languageChanged
事件，我可以捕捉到这样的事件：

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

这正是聚合物需要知道一些变化的地方

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

提前谢谢你
 这是绑定的全局问题。除非将它们从DOM中删除并再次插入，否则它们不会得到更新

在我的应用程序中，我有一个元素（我们称之为
myguidepost
），它代表整个应用程序的根（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);

注意：我没有使用
shadowdom

正因为如此，我不得不改变很多事情，在你的项目开始扩展到更大的领域之前，这是一个很好的解决方案。例如，行：

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

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

如果你遇到一些问题，我会在这里帮助你

如果您需要更多信息，请询问
，这是绑定的全局问题。除非将它们从DOM中删除并再次插入，否则它们不会得到更新

在我的应用程序中，我有一个元素（我们称之为
myguidepost
），它代表整个应用程序的根（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);

注意：我没有使用
shadowdom

正因为如此，我不得不改变很多事情，在你的项目开始扩展到更大的领域之前，这是一个很好的解决方案。例如，行：

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

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

如果你遇到一些问题，我会在这里帮助你

如果您需要更多信息，只需从i18next side询问
->您在i18next.changeLanguage中得到了一个回调，您可以触发任何更新polymer中绑定的操作（尚未使用polymer，因此对此没有想法…抱歉）。或者通过“对不起”绑定changeLanguage对聚合物部分没有帮助…是的，这是真的-我知道
i18enxt.on（'languageChanged'，…
event，但这正是我不知道如何通知Polymer的地方…根据Polymer的说法，Polymer正在查看数据绑定中更新函数的参数，因此也许您可以将语言键作为参数添加到转换器调用中！？只需从i18next side->您在i18next.changeLanguage中得到一个回调另一方面，您可以触发任何更新聚合物中绑定的操作（尚未使用聚合物，因此对此没有想法…抱歉）。或者通过抱歉绑定changeLanguage对聚合物部分没有帮助…是的，这是真的-我知道
i18enxt.on（'languageChanged'，…
事件，但这正是我不知道如何通知Polymer的地方…根据Polymer的说法，Polymer正在查看用于更新数据绑定中函数的参数，因此也许您可以将语言键作为参数添加到转换器调用中！？感谢您的意图，但我无法删除并重新附加我的根元素由于实现了一个保存语言的用户处理，用户选择了：：-（mm.我不知道在呈现绑定后如何重新初始化绑定的任何其他方法。唯一的问题是刷新整个页面。但是用户不友好的页面重新加载是不可能的，因为此时，用户的语言未知（无自动检测，将从数据库中加载）感谢您的意图，但我无法从DOM中删除并重新附加我的根元素，因为实现了一个用户处理，它保存了用户选择的语言：-（嗯。我不知道其他任何方法如何在呈现绑定后重新初始化绑定。唯一的方法是刷新整个页面。但用户不友好的页面重新加载是不可能的，因为此时用户的语言未知（没有自动检测，将从数据库加载）