Как сделать i18n с Handlebars.js (шаблонами усов)? - PullRequest
Новая
       22

Как сделать i18n с Handlebars.js (шаблонами усов)?

42 голосов
/ 14 октября 2011

В настоящее время я использую Handlebars.js (связанный с Backbone и jQuery), чтобы сделать веб-приложение почти полностью визуализированным на стороне клиента, и у меня возникают проблемы с интернационализацией этого приложения.

Как можноЯ делаю эту работу?

Есть ли плагины?

Ответы [ 6 ]

83 голосов
/ 10 января 2012

Я знаю, что на это ответили, но я хотел бы поделиться своим простым решением.Чтобы построить решение Gazler с использованием I18n.js (который мы используем в нашем проекте на работе), я просто использовал очень простой помощник Handlebars, чтобы упростить процесс локализации на лету:

Обработчик

Handlebars.registerHelper('I18n',
  function(str){
    return (I18n != undefined ? I18n.t(str) : str);
  }
);

Шаблон 

<script id="my_template" type="x-handlebars-template">
    <div>{{I18n myVar}}</div>
</script>

Основным преимуществом этого является отсутствие дорогой предварительной / последующей обработки всего объекта json.Не говоря уже о том, что входящий json имеет вложенные объекты / массивы, время, затрачиваемое на их поиск и анализ, может обойтись дорого, если объект огромен.

Приветствия!

5 голосов
/ 14 октября 2011

https://github.com/fnando/i18n-js - это рубиновый гем, который создаст файл интернационализации из вашей папки config / locales.Однако, если вы не используете rails, вы можете найти используемый здесь javascript здесь .

Затем вы просто сохраняете переводы во вложенном объекте. 

I18n.translations = {"en":{"date":{"formats":{"default":"%Y-%m-%d","short":"%b %d","long":"%B %d, %Y"}}}};

Что-то, что также может быть полезным для вас, которое я использую в своих проектах, - это исправление для усов, которое автоматически переводит строки в формате @@ translation_key @@ 

i18nize = function (result) {
    if (I18n) {
      var toBeTranslated = result.match(/@@([^@]*)@@/gm);
      if (!toBeTranslated) return result;
      for(var i = 0; i < toBeTranslated.length; i++) {
        result = result.replace(toBeTranslated[i], I18n.t(toBeTranslated[i].replace(/@/g, "")));
      }
    }
    return result;
};

Затем вы вызываете i18nize после рендеринга, чтобы вы могли помещать переводы в свои шаблоны вместо того, чтобы пропустить их.

Остерегайтесь исправления усов, поскольку вы не сможете перенести свои шаблоны в стандартные реализации усов. Однако в моем случае предлагаемые преимущества перевесили эту проблему.

Надеюсь, это поможет.

4 голосов
/ 09 февраля 2015

Основано на ответе @poweratom:

Только с ember.js , то же самое с параметрами, переданными в I18n.js.

Он будет магически перезагружаться при использовании вычисленных свойств. 

Ember.Handlebars.helper "t", (str, options) ->
  if I18n? then I18n.t(str, options.hash) else str

Шаблон: 

{{t 'sharings.index.title' count=length}}

YML: 

en:
  sharings:
    index:
      title: To listen (%{count})
1 голос
/ 26 октября 2017

На вопрос дан ответ, но, возможно, это тот случай, когда вы не хотите зависеть от какой-либо библиотеки i8n и использовать ее полностью самостоятельно. Я пользуюсь своим вдохновенным от https://gist.github.com/tracend/3261055

1 голос
/ 02 марта 2016

С NodeJs / Express :

  • node-i18n (определить заголовок Accept-Language) 

      app.use(i18n.init);

  • Пример файла перевода 

    {   
 "hello": "hello",   
 "home-page": {
   "home": "Home",
    "signup": "Sign Up"  
 } 
}

  • В экспресс-контроллере 

    ...
data.tr = req.__('home-page');
var template = Handlebars.compile(source);
var result = template(data);

  • Шаблон руля 

        <li class="active"><a href="/">{{tr.home}}</a></li>
0 голосов
/ 23 февраля 2015

для тех, кто не использует JS-фреймворк http://i18next.com тоже выглядит многообещающе

просто создайте помощник руля для вызова перевода, как здесь http://i18next.com/pages/doc_templates.html

...