如何用Mustache.js做高级i18n？

Question

看来Twitter正在用叉子的Mustache.js提供国际化其模板？

有人可以给出一个简单的例子说明这是如何完成的,也许还概述了为这些翻译众包所需的语义？

当然有这个简单的例子:

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!"

但我想更深入地了解如何构造_(文本)函数和translationTable以提供条件,单数,复数等.非常感谢解决更高级用例的示例.

Answer 1

我知道我并没有真正回答你的问题,但除非你计划在这个项目上花费大量时间,否则我会认真考虑将此作为数据问题.

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

和:

{
    title : {
        key: '???',
        value: '?????'
    }
}

然后只需使模板通用:

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

和:

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

您需要维护的只是模板和数据之间的1:1映射.

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

把事情简单化 :)

Answer 2

构建包括条件,循环等在内的更高级的案例的方式与常规的Mustache库完全相同.您可以使用新的I18N {{_ i}}开始和{{/ i}}结束标记来包装模板的部分内容以进行翻译.

如果您的模板是:

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

你可以包装第一行

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

并在翻译地图中包含内部部分.

有关完整示例,请参见http://jsfiddle.net/ZsqYG/2/.