¿Cómo hacer i18n avanzado con Mustache.js?

Question

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

¿Podría alguien dar un breve ejemplo de cómo se hace esto y tal vez también delinear qué semántica es necesaria para convertir estas traducciones en crowdsourcing?

Hay, por supuesto este sencillo ejemplo:

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 un poco más de conocimiento sobre cómo estructurar la función _ (texto) y translationTable para proporcionar condicionales, singular, plural etc. Ejemplos de la solución de casos de uso más avanzados sería muy apreciada.

Answer 1

La estructuración de los casos más avanzados, incluidos los condicionales, bucles, etc. se realiza de la misma manera que con la biblioteca regular de Moustache. Puede usar las nuevas etiquetas finales I18N {{_i}} y {{/ i}} para envolver partes de su plantilla para fines de traducción.

Si la plantilla es:

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

que sólo puede envolver la primera línea

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

e incluyen la parte interna en el mapa de la traducción.

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

Answer 2

Sé que no estoy respondiendo su pregunta realmente, pero a menos que esté pensando en 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: 'ترحيب' 
    } 
} 

A continuación, sólo hacen que la plantilla genérica:

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

Y:

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

Todo lo que necesita para mantener es un mapeado 1: 1 entre plantillas y datos.

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

que sea sencillo :)

Answer 3

creo que lo que quiere hacer es utilizar características i18n con el bigote. Esto se puede lograr por la sobrecarga del método Mustache.render como siguen:

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