Question

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

但我想更深入地了解如何构造_（文本）函数和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/。

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

如何用Mustache.js做高级i18n？

3 个答案: