Куда мне поместить переводы для Ember-I18n в Ember-CLI?

#ember-cli #ember-i18n

#ember-cli #ember-i18n

Вопрос:

Я новичок в ember и ember-cli, и я все еще изучаю, куда все идет. Я пытаюсь добавить многоязычную поддержку с помощью модуля ember-i18n.

У меня установлены зависимости с помощью bower

 bower install cldr ember-i18n --save
  

И у меня есть мой импорт, работающий в Brocfile.js

 app.import('vendor/cldr/plurals.js');
app.import('vendor/ember-i18n/lib/i18n.js');
  

В моем приложении работает помощник на руле i18n

{{t hello}} выдает мне «Отсутствует перевод: привет»

Я не знаю, куда поместить или сослаться на файл в структуре папок ember-cli, который содержит переводы.

В документе ember-i18n это будет выглядеть примерно так

 Ember.I18n.translations = {
    hello: "Hello World",
}
  

Я попытался вставить его app.js , чтобы посмотреть, как он работает, но получил ошибку:

 Uncaught TypeError: Cannot set property 'translations' of undefined
  

Комментарии:

1. имя библиотеки — CLDR, а не CDLR, пожалуйста, исправьте bower install строку

2. Исправлено, спасибо @chrmod.

3. Я понятия не имею, почему, но импорт cldr до ember-i18n в основном препятствовал отображению моих шаблонов. Возврат к 2 строкам исправил проблему. Понятия не имею, почему!

4. Неважно: cldr должен быть включен до того, как ember-i18n заработает. Моя ошибка заключалась в том, что я не установил CLDR.DefaultLanguage = «en». Теперь все работает!

Ответ №1:

Вы можете добавить свои переводы в initializer (документы здесь). С помощью ember-cli вы можете сгенерировать перевод, выполнив ember generate initializer i18n его в командной строке.

В инициализаторе вы можете установить переводы:

 var TRANSLATIONS = {
  'user.edit.title': 'Edit User',
  'user.followers.title.one': 'One Follower',
  'user.followers.title.other': 'All {{count}} Followers',
  'button.add_user.title': 'Add a user',
  'button.add_user.text': 'Add',
  'button.add_user.disabled': 'Saving...'
};
var i18nInitializer = {
  name: 'i18n',
  initialize: function() {
    Ember.I18n.translations = TRANSLATIONS;
  }
};
export default i18nInitializer;
  

Если вы хотите получить языковые данные через ajax в java-properties файле, вы можете получить их с помощью ajax и проанализировать с помощью java-properties.js . Он также доступен через Bower

Ответ №2:

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

Мое решение может быть не идеальным способом справиться с этим, но, похоже, оно хорошо работает с моим сайтом.

Я использую Ember-cli и включил ember-i18n для интернационализации, а также CLDR для обработки множественного числа. Мой сайт использует файл cookie для хранения языка пользователя, который используется для загрузки соответствующего языкового файла при загрузке сайта. Файл cookie также передается службе REST (некоторые вызовы API возвращают объекты, которые могут содержать переведенный текст). Я использую jQuery-cookie для обработки файлов cookie.


Сначала я создал свои файлы переводов, по одному для каждого языка, которые представляют собой просто файлы javascript, которые я затем загружу с помощью $.getScript. Я сохранил их в папке «translations» в папке public / javascript, созданной Ember-cli.

translations-en.js

 Ember.I18n.translations = {
  'hello' : 'Hello World!',
  ...
}
  

translations-fr.js

 Ember.I18n.translations = {
  'hello' : 'Bonjour Monde!',
  ...
}
  

Затем я устанавливаю инициализатор для CLDR, который устанавливает язык по умолчанию на основе пользовательского файла cookie, используемого моим сайтом — если файл cookie еще не существует, по умолчанию используется значение ‘en’ и создается файл cookie.

appinitializerscldr.js

 export default {
  name: 'cldr',

  initialize: function() {
    var lang = $.cookie('user-lang');

    if (lang === undefined) {  // no cookie exists yet
      lang = 'en';
      $.cookie('user-lang', lang, {expires:365, path:'/'});
    }

    CLDR.defaultLanguage = lang; 
  }
};
  

Теперь в функции beforeModel маршрута приложения я получаю файл переводов на основе значения, сохраненного в CLDR.DefaultLanguage.

approutesapplication.js

 export default Ember.Route.extend({

  beforeModel: function() {
    $.getScript('./javascript/translations/translations-'   CLDR.defaultLanguage   '.js')
      .fail(function(jqxhr, reason, exception) {
        // handle failure
      });
  }
});
  

Если на вашем сайте много строк перевода или много языков, вы можете не захотеть, чтобы ваши файлы перевода включались каждый раз, когда кто-то загружает ваше приложение, или загрузка может занять некоторое время. В этом случае вы можете заменить этот getScript вызовом ajax и получить файл, обслуживаемый вашей серверной частью. В моем случае не слишком много строк перевода, так что все в порядке.

Теперь каждый раз, когда пользователь хочет изменить язык, все, что мне нужно сделать, это обновить значение моего пользовательского файла cookie, а затем перезагрузить сайт, который снова пройдет через функции инициализатора и beforeModel и загрузит соответствующий языковой файл.

 export default Ember.Controller.extend({
  actions: {
    changeLanguage: function(lang) {
      $.cookie('user-lang', lang); 

      window.location.reload();
    }
  }
});
  

Каждый раз, когда пользователь перезагружает страницу или возвращается на сайт, его последний выбранный язык будет загружен из файла cookie по умолчанию. Конечно, пользователь может удалить свой файл cookie или войти в систему из другого браузера, и в этом случае сайт вернется к языку en по умолчанию. Чтобы обойти это, выбор языка пользователя должен сохраняться где-то на серверной части и выбираться при загрузке приложения — но это другая задача.

Ответ №3:

Пространство имен неверно.

Вам нужно Em.I18n.translations .

Попробовал. Работает.

Я не знаю, куда поместить или сослаться на файл в структуре папок ember-cli, который содержит переводы.

Я тоже. Конечно app.js , работает, но, может быть, кто-нибудь может дать хороший намек. Я тоже довольно новичок во всем этом ember-cli…

Комментарии:

1. Да! Спасибо Doe. Я понял это после того, как некоторое время боролся с этим. Но мои основные вопросы все еще остаются в силе, ember-i18n, похоже, ожидает, что переводы будут включать только переводы для текущего языка. Это означало бы, что должен быть какой-то умный процесс для загрузки соответствующего перевода. Я хотел бы поместить эту логику на стороне сервера и просто ссылаться на один файл, но я не уверен, как создать зависимость для ember-cli, которая не управляется с помощью bower.

2. Я тоже очень заинтересован в этой теме. Может быть, стоит начать новый вопрос только для этого.