It seems Twitter is using a fork of Mustache.js to provide i18n to its templates?

Could someone give a brief example of how this is done and perhaps also outline what semantics is necessary to crowdsource these translations?

There is of course this simple example:

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

But I'd like some more insight on how to structure the _(text) function and translationTable to provide conditionals, singular, plural etc. Examples of solving more advanced use cases would be much appreciated.

It seems Twitter is using a fork of Mustache.js to provide i18n to its templates?

Could someone give a brief example of how this is done and perhaps also outline what semantics is necessary to crowdsource these translations?

There is of course this simple example:

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

But I'd like some more insight on how to structure the _(text) function and translationTable to provide conditionals, singular, plural etc. Examples of solving more advanced use cases would be much appreciated.

• javascript
• twitter
• internationalization
• templating
• mustache

• 1 I was under the impression that twitter uses hogan.js for mustache templating. If that is the case, then martin's answer below seems like a good suggestion. – Patrick Klingemann Commented Mar 23, 2012 at 4:33

3 Answers 3

I know i'm not answering your question really, but unless you are planning on spending a lot of time on this project I would seriously consider just leaving this as a data issue.

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

And:

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

Then just make the template generic:

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

And:

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

All you need to maintain is a 1:1 mapping between templates and data.

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

Keep it simple :)

Structuring the more advanced cases including conditionals, loops and so on are done in the exact same way as with the regular Mustache library. You can use the new I18N {{_i}} start and {{/i}} end tags to wrap parts of your template for translation purposes.

If you template is:

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

you can just wrap the first line

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

and include the inner part in the translation map.

See http://jsfiddle.net/ZsqYG/2/ for a complete example.

I believe what you want to do is to use i18n features with Mustache. This can be achieved by overloading the Mustache.render method as follow:

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