如何使用Mustache.js进行高级i18n（国际化）？

Question

看起来Twitter正在使用mustache.js的一个分支版本来为其模板提供国际化（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以提供条件语句、单数形式、复数形式等。非常感谢您能提供更高级的用例示例。

- dani

---

我曾经认为Twitter使用hogan.js来进行Mustache模板处理。如果是这样的话，那么下面Martin的回答似乎是一个不错的建议。 - Patrick Klingemann

Answer 1

我知道这并不是你问题的答案，但是除非你打算花很多时间在这个项目上，否则我会认真考虑将其视为数据问题而不予处理。

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

并且：

{
    title : {
        key: 'لقب',
        value: 'ترحيب'
    }
}

然后只需将模板设为通用模板：

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

并且：

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

你只需要维护模板和数据之间的一对一映射。

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

保持简单 :)

- martin

---

但是，如果将语言字符串（不是动态数据）与模板分开，这样做就没有意义了，对吗？或者我漏掉了什么？国际化的优势在于为多种语言提供一个模板。 - Florian Mertens

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/。

- Ryan953

Answer 3

我相信你想要做的是使用Mustache的i18n功能。这可以通过重载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));

- Jean-Pierre Bécotte