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

而這正是聚合物需要知道的東西改變了點...

是否有可能實現的，這些數據綁定會得到通知？我不想手動更新每一個綁定...

預先感謝您！

來源

2017-10-13 sebastian

從i18next側 - >您在i18next上得到了回調。changeLanguage裏面，你可以觸發任何更新聚合物中的綁定（不使用聚合物，所以沒有想法...對不起）。或綁定changeLanguage通過https://www.i18next.com/api.html#onlanguagechanged 對不起，不能幫助聚合物部分... – jamuhl

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

據https://stackoverflow.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甚至沒有設置，只在一些變量中創建）。

我在這裏可以幫助你解決一些問題。

如果您需要更多信息，請查詢

來源

2017-10-14 21:42:50

謝謝你的意圖，但我不能撈出因爲有一個用戶處理來實現的，即持有的語言，用戶選擇再附上DOM我的根元素。:-( – sebastian

毫米。我不知道的任何其他方法如何一旦它們被渲染，重新初始化綁定。唯一的是刷新整個頁面。但用戶不友好 –

頁面重裝是不可能的，因爲在這一點上，用戶的語言是未知的（沒有自動檢測，將從數據庫加載） – sebastian

I18Next＆Polymer：更新語言更改時的數據綁定

回答

相關問題