Come creare i18n con Handlebars.js (modelli di baffi)?

Question

Attualmente sto utilizzando Handlebars.js (associato a Backbone e jQuery) per rendere l'applicazione Web quasi completamente resa lato client e sto riscontrando problemi con l'internazionalizzazione di questa app.

Come posso fare questo lavoro?

Ci sono dei plugin?

Answer 1

So che questo è stato risposto, ma mi piacerebbe condividere la mia soluzione semplice. Per costruire la soluzione di Gazler utilizzando I18n.js (che usiamo con il nostro progetto sul posto di lavoro), ho solo usato un semplice aiutante manubrio per facilitare il processo di fare la localizzazione al volo:

Handler

Handlebars.registerHelper('I18n', 
    function(str){ 
    return (I18n != undefined ? I18n.t(str) : str); 
    } 
); 

Template

<script id="my_template" type="x-handlebars-template"> 
    <div>{{I18n myVar}}</div> 
</script> 

il vantaggio principale di questo è che non c'è costoso trattamento pre/post su l'intero oggetto jSON. Per non parlare del fatto che se il json in arrivo ha oggetti/array annidati, il tempo speso a cercarli e analizzarli potrebbe diventare costoso se l'oggetto è enorme.

Cheers!

Answer 2

https://github.com/fnando/i18n-js è una gemma di rubini che creerà un file di internazionalizzazione dalla cartella config/locales. Tuttavia, se non si utilizzano i binari, è possibile trovare il javascript utilizzato da solo here.

È poi semplicemente memorizzare le traduzioni in un oggetto nidificato ..

I18n.translations = {"en":{"date":{"formats":{"default":"%Y-%m-%d","short":"%b %d","long":"%B %d, %Y"}}}}; 

Qualcosa che può anche essere utile a voi che uso sui miei progetti è una patch per baffi che si traduce automaticamente le stringhe in formato @@ @@ translation_key

i18nize = function (result) { 
    if (I18n) { 
     var toBeTranslated = result.match(/@@([^@]*)@@/gm); 
     if (!toBeTranslated) return result; 
     for(var i = 0; i < toBeTranslated.length; i++) { 
     result = result.replace(toBeTranslated[i], I18n.t(toBeTranslated[i].replace(/@/g, ""))); 
     } 
    } 
    return result; 
}; 

È quindi chiamare i18nize dopo rendering per consentire di mettere traduzioni nei template invece di passare attraverso.

Attenzione ai patch baffi poiché non sarà possibile eseguire il porting dei modelli sulle implementazioni standard dei baffi. Tuttavia nel mio caso, i benefici offerti superano questo problema.

Spero che questo aiuti.

Answer 3

in base alla risposta s' @poweratom:

Solo con ember.js, lo stesso con opzioni passate I18n.js.

Ricaricherà magicamente se si utilizzano proprietà calcolate.

Ember.Handlebars.helper "t", (str, options) -> 
    if I18n? then I18n.t(str, options.hash) else str 

Template:

{{t 'sharings.index.title' count=length}} 

Y ml:

en: 
    sharings: 
    index: 
     title: To listen (%{count}) 

Answer 4

per coloro che non fanno uso di framework JS http://i18next.com sembra promettente anche

Basta creare manubrio aiutante di chiamare traduzioni come qui http://i18next.com/pages/doc_templates.html

Answer 5

Con NodeJs/espresso:

• nginx delega config

  server { 
      listen 80; 
      server_name fr.domain.com; 
      client_max_body_size 20m; 
      proxy_set_header Accept-Language fr 
  
      location/{ 
       proxy_pass http://127.0.0.1:3000; 
       proxy_set_header Host $host; 
       proxy_buffering off; 
      } 
  } 
  

• node-i18n (rilevare l'intestazione Accept-Language)

  app.use(i18n.init); 
  

• file di traduzione di esempio

  { 
  "hello": "hello", 
  "home-page": { 
      "home": "Home", 
      "signup": "Sign Up" 
  } 
  } 
  

• controller espresso

  ... 
  data.tr = req.__('home-page'); 
  var template = Handlebars.compile(source); 
  var result = template(data); 
  

• Manubrio Template

  <li class="active"><a href="/">{{tr.home}}</a></li> 
  

Answer 6

La domanda si risponde, ma la loro può essere un caso in cui non si vuole dipendere da qualsiasi i8n lib e usa completamente il tuo. Sto usando il mio ispirato da https://gist.github.com/tracend/3261055