如何用 Mustache.js 做高级 i18n？

Question

似乎 Twitter 正在使用 Mustache.js 中的 fork 为其模板提供 i18n？

有人可以给出一个简短的例子来说明这是如何完成的，或许还可以概述一下众包这些翻译所需的语义？

当然有这个简单的例子：

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) 函数和 translationTable 以提供条件、单数、复数等。解决更高级用例的示例将不胜感激。

Answer 1

我相信您想要做的是将 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 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/。

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

保持简单:)