如何使用 Mustache.js 进行高级 i18n 操作？

Question

Twitter 似乎正在使用 fork 的 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!"

但我想对如何构造 _(text) 函数和翻译表以提供条件、单数、复数等有更多的了解。解决更高级用例的示例将不胜感激。

Answer 1

构建更高级的案例（包括条件、循环等）的方式与常规 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/。

Answer 2

我相信您想要做的是将 i18n 功能与 Mustache 一起使用。这可以通过重载 Mustache.render 方法来实现，如下所示：

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 3

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

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

保持简单:)