hbs - plantillas javascript

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

Question

Actualmente estoy usando Handlebars.js (asociado con Backbone y jQuery) para hacer que una aplicación web sea renderizada casi por completo del lado del cliente, y estoy teniendo problemas con la internacionalización de esta aplicación.

¿Cómo puedo hacer que esto funcione?

¿Hay algún complemento?

Answer 1

Basado en la respuesta de @poweratom:

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

Se volverá a cargar mágicamente si se usan propiedades calculadas.

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

Modelo:

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

Yml:

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

Answer 2

Con NodeJs / Express :

• node-i18n (detectar el encabezado Accept-Language)

    app.use(i18n.init); 

• Archivo de traducción de muestra

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

• En el controlador Express

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

• Plantilla de manubrios

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

Answer 3

La pregunta es respondida, pero puede tratarse de un caso en el que no desee depender de ninguna i8n lib y usar completamente la suya propia. Estoy usando el mío inspirado de https://gist.github.com/tracend/3261055

Answer 4

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

Entrenador de animales

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

Modelo

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

La principal ventaja de esto es que no hay costosos procesamientos pre / post en todo el objeto json. Sin mencionar que si el json entrante tiene objetos / matrices anidados, el tiempo que se pasa buscando y analizando puede ser costoso si el objeto es enorme.

¡Aclamaciones!

Answer 5

para aquellos que no usan ningún marco JS http://i18next.com parece prometedor

solo crea el handlebars helper para llamar a traducciones como aquí i18next.com/pages/doc_templates.html

Answer 6

github.com/fnando/i18n-js es una gema de rubí que creará un archivo de internacionalización desde su carpeta config / locales. Sin embargo, si no está utilizando los rieles, puede encontrar el javascript utilizado por sí solo here .

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 útil para usted y que uso en mis proyectos es un parche en el bigote que traduce cadenas automáticamente 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;
};

A continuación, llama a i18nize después del procesamiento para permitirle poner traducciones en sus plantillas en lugar de pasarlas.

Tenga cuidado con el parche de bigote ya que no podrá transferir sus plantillas a las implementaciones estándar de bigote. Sin embargo, en mi caso, los beneficios ofrecidos superaron este problema.

Espero que esto ayude.