2014-10-30 74 views
1

我在BackboneJS應用程序中使用i18n.js進行文本本地化。但卡在我需要重新加載應用程序中的語言更改文本翻譯的點。我正在調用設置視圖render()函數的語言更改,但不適用於我,但在重新加載index.html它的作品。那麼,我如何重新加載翻譯文件和視圖以反映更改。下面是我tried--在骨幹應用程序中重新加載骨幹視圖和i18n翻譯文件?

應用bootstrap.js

var locale = {}; 

    locale.language = "en-us";//default 

    locale.setLanguage = function (language) { 
     localStorage.setItem('localLanguage', '' + language); 
    }; 

    locale.getLanguage = function() { 
     return localStorage.getItem('localLanguage'); 
    }; 
    require.config({ 
     config: { 
      i18n: { 
       locale: locale.getLanguage() 
      } 
     } 
    }); 

settingView.js

define(['compiled/settingTmpl','i18n!nls/setting' 
], function (SettingTmpl,setting) { 
    'use strict'; 

    var SettingView = Backbone.View.extend({ 

     events: { 
      "change #languageSelect": "changeLocale" 
     }, 
     initialize: function() { 
      WellNation.helper.log("Setting view initialize"); 
      this.render(); 
     }, 
     changeLocale: function (e) { 
      var locale = e.currentTarget.value; 
      WellNation.locale.setLanguage(locale); 
      this.render(); 
     }, 
     render: function() { 
      this.$el.html(SettingTmpl({speak:setting})); 
      return this; 
     } 
    }); 

    return SettingView; 
}); 

settingTmpl.handlebars

<div class="row"> 
     <label>{{speak.language}}</label> 
     <select id="languageSelect"> 
      <option value="en-us">English (United States)</option> 
      <option value="fr-fr">Francais (France)</option> 
     </select> 
    </div> 

NLS/FR-FR /設置.js

define({ 
     "language" : "langue" 
    }); 

NLS/setting.js

define({ 
     "root" : { 
     "language" : "Language" 
     }, 
     "fr-fr" : true // The system will accept French 
    }); 

回答

1

根據this SO問題和this github issue它不可能在與i18n.js.運行時改變區域設置

從官方的文檔,目前還不清楚,我們可以使用它在運行與否:RequireJS會使用瀏覽器的navigator.language或navigator.userLanguage屬性來確定使用何種語言環境值我/ NLS /顏色,所以你的應用程序不必改變如果你喜歡設置語言環境,你可以使用模塊配置來傳遞語言環境到插件

所以經過一些研究和步行扔i18n.js源代碼我發現最適合您的解決方案是保持相同的結構並使用location.reload()

+0

Thankyou Vahan給你的時間,有沒有其他的替代解決方案,我可以實現。 – 2014-10-30 12:07:47

+0

解決方案受技術限制時就是這種情況。你可以實現你自己的國際化機制。例如,您可以將所有翻譯加載到一個以語言前綴作爲關鍵字的對象中,並使其中的其餘部分保持不變。然後,當它傳遞給視圖的模板動態使用該前綴。 – 2014-10-30 12:20:36

+0

但在這種情況下,您應該重新呈現所有視圖。 – 2014-10-30 12:22:12