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 :)