javascript - ¿Cómo hacer i18n avanzado con Moustache.js?

twitter internationalization

Question

¿Parece que Twitter está utilizando una fork de Mustache.js para proporcionar i18n a sus plantillas?

¿Alguien podría dar un breve ejemplo de cómo se hace esto y tal vez también describir qué semántica es necesaria para que estas traducciones se lleven a cabo en masa?

Por supuesto hay un ejemplo simple:

var template = "{{_i}}{{name}} is using mustache.js!{{/i}}"
var view = {
name: "Matt"
};
var translationTable = {
// Welsh, according to Google Translate
"{{name}} is using mustache.js!": "Mae {{name}} yn defnyddio mustache.js!"
};
function _(text) {
return translationTable[text] || text;
}
alert(Mustache.to_html(template, view));
// alerts "Mae Matt yn defnyddio mustache.js!"

Pero me gustaría tener más información sobre cómo estructurar la función _ (texto) y la tabla de traducción para proporcionar condicionales, singular, plural, etc. Se agradecerán los ejemplos de resolución de casos de uso más avanzados.

Answer 1

Creo que lo que quieres hacer es usar las características de i18n con Moustache. Esto se puede lograr mediante la sobrecarga del método Mustache.render de la siguiente manera:

var lang = {
''is_using_pre'': ''Mae '',
''is_using'': ''yn defnyddio''
};
var Mustache = (function (Mustache) {
var _render = Mustache.render;
Mustache.render = function (template, view, partials) {
view[''lang''] = lang;
return _render (template, view, partials);
};
return Mustache;
}(Mustache));
var template = "{{_i}}{{lang.is_using_pre}}{{name}} {{lang.is_using}} mustache.js!{{/i}}";
var view = {
name: "Matt"
};
alert(Mustache.to_html(template, view));

Answer 2

La estructuración de los casos más avanzados, incluidos condicionales, bucles, etc., se realiza de la misma manera que con la biblioteca de bigotes normal. Puede usar las nuevas etiquetas I18N {{_i}} start y {{/ i}} para envolver partes de su plantilla con el fin de traducirlas.

Si tu plantilla es:

<h1>Title: {{title}}</h1>
<ul>
{{#a_list}}
<li>{{label}}</li>
{{/a_list}}
</ul>

puedes simplemente envolver la primera línea

<h1>{{_i}}Title: {{title}}{{/i}}</h1>

e incluir la parte interior en el mapa de traducción.

Vea http://jsfiddle.net/ZsqYG/2/ para un ejemplo completo.

Answer 3

Sé que no estoy respondiendo a tu pregunta realmente, pero a menos que estés planeando pasar mucho tiempo en este proyecto, consideraría seriamente dejar esto como un problema de datos.

{
title : {
key: ''título'',
value: ''bienvenida''
}
}

Y:

{
title : {
key: ''لقب'',
value: ''ترحيب''
}
}

Luego simplemente haga la plantilla genérica:

<h1>{{title.key}}: {{title.value}}</h1>

Y:

<h1>{{title.value}} {{title.key}}</h1>

Todo lo que necesita mantener es una asignación 1: 1 entre plantillas y datos.

Mustache.render(data[language], template[language]);

Mantenlo simple :)