Cómo hacer i18n con manillar.js (plantillas de bigote)?

Actualmente estoy usando Manillares.js (asociado con Backbone y jQuery) para hacer una aplicación web casi totalmente lado del cliente renderizado, y estoy teniendo problemas con la internacionalización de esta aplicación.

¿Cómo puedo hacer que esto funcione?

¿Hay algún plugin?

Author: Simon Adcock, 2011-10-14
Source

6 answers

Sé que esto ha sido contestado, pero me gustaría compartir mi solución simple. Para construir sobre la solución de Gazler usando I18n.js (que utilizamos con nuestro proyecto en el trabajo), acabo de utilizar un ayudante Manillar muy simple para facilitar el proceso para hacer la localización sobre la marcha:

Controlador

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

Plantilla

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

La principal ventaja de esto es que no hay un costoso pre/post procesamiento en todo el objeto json. Sin mencionar si el json entrante tiene objetos/matrices anidados, el tiempo dedicado a buscarlos y analizarlos puede ser costoso si el objeto es enorme.

Salud!

 79
Author: poweratom,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-10 04:24:05

Https://github.com/fnando/i18n-js es una gema ruby que creará un archivo de internacionalización desde tu carpeta config/locales. Sin embargo, si no está utilizando rails, puede encontrar el javascript utilizado por sí mismo aquí.

A continuación, simplemente almacena las traducciones en un objeto anidado..

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

Algo que también puede ser de utilidad para usted que uso en mis proyectos es un parche para bigote que traduce automáticamente cadenas en el 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;
};

Luego llama a i18nize después de render para permitirle poner traducciones en sus plantillas en lugar de pasarlas.

Tenga cuidado de parchear mustache ya que no podrá portar sus plantillas a implementaciones estándar de mustache. Sin embargo, en mi caso, los beneficios ofrecidos superaron este problema.

Espero que esto ayude.

 4
Author: Gazler,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-11 10:32:41

Basado en la respuesta de @poweratom:

Solo con brasa.js , lo mismo con las opciones pasadas a I18n.js.

Se recargará mágicamente si se utilizan propiedades calculadas.

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

Plantilla: 

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

Yml: 

en:
  sharings:
    index:
      title: To listen (%{count})
 3
Author: jvenezia,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-09 18:56:11

Con NodeJS / Express :

  • Node-i18n (detecta el encabezado Accept-Language) 

      app.use(i18n.init);

  • Ejemplo de archivo de traducción 

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

  • En Express controller

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

  • Plantilla de manillar 

        <li class="active"><a href="/">{{tr.home}}</a></li>
 1
Author: dam1,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-09 14:08:34

Para aquellos que no usan ningún framework JS http://i18next.com parece prometedor también

Simplemente crea handlebars helper para llamar a traducciones como aquí http://i18next.com/pages/doc_templates.html

 0
Author: equivalent8,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-23 16:48:05

La pregunta está respondida, pero puede ser un caso en el que no desee depender de ninguna lib de i8n y usar completamente la suya. Estoy usando mi propio inspirado de https://gist.github.com/tracend/3261055

 0
Author: Sahib Khan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-26 15:41:40