Question

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

目前的方法如下：

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甚至没有设置。只在某个变量中创建。）

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

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

I18Next＆amp; Polymer：语言更改时更新数据绑定

1 个答案: