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

问题描述：

在我的项目中，我使用Polymer 1和i18next（和i18next-xhr-backend）来实现国际化。我做的基本方法（见下文）工作得很好，但当用户更改语言时，聚合物数据绑定不会更新。I18Next＆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); 
    } 
});

而在我的元素我通过

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

达到像

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

或程序翻译的问题是：当我在运行时加载一种新语言（如de），它会按需要加载，但数据绑定不会更新，并且所有字符串均在en或default中设置。

i18next触发一个事件languageChanged我能赶上这样的：

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

而这正是聚合物需要知道的东西改变了点...

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

预先感谢您！

从i18next侧 - >您在i18next上得到了回调。changeLanguage里面，你可以触发任何更新聚合物中的绑定（不使用聚合物，所以没有想法...对不起）。或绑定changeLanguage通过https://www.i18next.com/api.html#onlanguagechanged 对不起，不能帮助聚合物部分... – jamuhl

是的，这是真的 - 我geht'i18enxt.on（' languageChanged”，...'事件，但是这正是我不知道如何通知聚合物点... – sebastian

据https://*.com/questions/27159625/polymer-using-a-function- IN-A-数据绑定表达式聚合物是看PARAMS在数据绑定更新功能，所以也许你可以添加语言键作为参数传递给译者来电！？ – SJFrK

答

这是绑定的全局性问题。除非将它们从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

因为这样，我不得不改变很多事情，这是伟大的解决您的项目开始expandng到前更大的东西。例如行：

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

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

我在这里可以帮助你解决一些问题。

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

谢谢你的意图，但我不能捞出因为有一个用户处理来实现的，即持有的语言，用户选择再附上DOM我的根元素。:-( – sebastian

毫米。我不知道的任何其他方法如何一旦它们被渲染，重新初始化绑定。唯一的是刷新整个页面。但用户不友好 –

页面重装是不可能的，因为在这一点上，用户的语言是未知的（没有自动检测，将从数据库加载） – sebastian

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

相关推荐