Как выполнить расширенный i18n с Mustache.js ?

#javascript #twitter #internationalization #templating #mustache

#javascript #Twitter #интернационализация #создание шаблонов #усы

Вопрос:

Похоже, 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 для предоставления условных выражений в единственном числе, множественном числе и т.д. Примеры решения более сложных вариантов использования были бы высоко оценены.

Ответ №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]);

Сохраняйте простоту 🙂

1. Но тогда не имеет смысла, зачем отделять языковые строки (которые не являются динамическими данными) от шаблонов? Или я что-то упускаю? Сильная сторона интернационализации — иметь один шаблон для предложений на нескольких языках?

Ответ №2:

Структурирование более сложных вариантов, включая условные выражения, циклы и так далее, Выполняется точно так же, как и с обычной библиотекой Mustache. Вы можете использовать новые теги I18N {{_i}} start и {{/i}} end для переноса частей вашего шаблона в целях перевода.

Если ваш шаблон:

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

вы можете просто перенести первую строку

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

и включите внутреннюю часть в карту перевода.

Смотрите http://jsfiddle.net/ZsqYG/2 / для полного примера.

Ответ №3:

Я полагаю, что вы хотите сделать, это использовать функции 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));