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 hacer i18n con Handlebars.js (plantillas de bigote)?
¿Cómo puedo hacer esto?
¿Hay complementos?
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 utilizamos con nuestro proyecto en el trabajo), acabo de utilizar una manera muy simple ayudante de manillar para facilitar el proceso de hacer la localización sobre la marcha:
Handler
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 procesamiento de pre/post caro 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.
¡Salud!
Preferiría esta solución en comparación con @Gazler –
Buena solución. Hice esto uno https://gist.github.com/1589125. Pero el de @ poweratom parece más limpio. –
Recibo este error: 'TypeError: I18n.t no es una función'. ¿Cualquier sugerencia? – slackmart
https://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 raíles, puede encontrar el javascript utilizado por su cuenta here.
A continuación, simplemente almacenar 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 yo uso en mis proyectos es un parche para bigote que se traduce automáticamente las 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;
};
a continuación, llama a i18nize después rendir a permitir poner traducciones en sus plantillas en lugar de pasar a través.
Tenga cuidado con el parche de bigote, ya que no podrá trasladar sus plantillas a las implementaciones estándar de bigote. Sin embargo, en mi caso, los beneficios ofrecidos superaron este problema.
Espero que esto ayude.
Eso es realmente genial, totalmente Me perdí el hecho de que podría "volver a analizar" la plantilla una vez renderizada con una función mía, eso es exactamente lo que haré, creo, tal vez con R.js o algo así. Muchas gracias =) – mdcarter
Basado en respuesta @poweratom 's:
Sólo con ember.js, lo mismo con las opciones pasadas I18n.js.
Se volverá a cargar mágicamente si se utilizan las 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})
para aquellos que no utilizaban un marco JS http://i18next.com parece prometedor demasiado
acaba de crear manillar ayudante para llamar traducciones como aquí http://i18next.com/pages/doc_templates.html
Con nodejs/express:
nginx configuración de proxies
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 (detectar la cabecera Accept-Language)
app.use(i18n.init);
archivo de traducción de la muestra
{
"hello": "hello",
"home-page": {
"home": "Home",
"signup": "Sign Up"
}
}
En controlador expreso
...
data.tr = req.__('home-page');
var template = Handlebars.compile(source);
var result = template(data);
Plantilla Manillar
<li class="active"><a href="/">{{tr.home}}</a></li>
La pregunta se contesta pero su puede ser un caso en el que no quiere depender de ninguna i8n lib y usa completamente el tuyo. Estoy usando mi propio inspirado en https://gist.github.com/tracend/3261055
se puede usar http://i18next.com para i18n-> viene con ayuda del manubrio: http://i18next.com/pages/doc_templates.html – jamuhl