Internationalization (i18n)

Ember.js предоставляет мощные инструменты для создания динамичных веб-приложений, и одна из его ключевых возможностей — это поддержка интернационализации (i18n). Интернационализация позволяет создавать приложения, которые могут быть легко адаптированы для различных языков и регионов. Это особенно важно для глобальных сервисов, которые обслуживают пользователей из разных стран и говорят на разных языках. В этой главе рассмотрим, как в Ember.js можно реализовать поддержку нескольких языков с помощью различных инструментов и подходов.

Для работы с интернационализацией в Ember.js обычно используется библиотека ember-intl. Это официальный пакет для поддержки i18n, который интегрируется с Ember.js и предоставляет набор инструментов для работы с переводами, форматированием дат, чисел и валют.

Чтобы установить и настроить ember-intl в проекте, нужно выполнить следующие шаги:

  1. Установка пакета

    Для установки библиотеки используйте команду:

    ember install ember-intl

  2. Конфигурация

    После установки необходимо настроить локали, с которыми будет работать ваше приложение. Для этого создается файл конфигурации в config/environment.js. В нем указывается язык по умолчанию и список поддерживаемых локалей:

    module.exports = function (environment) {
  let ENV = {
    // Другие настройки
    'ember-intl': {
      defaultLocale: 'en', // Язык по умолчанию
      locales: ['en', 'ru', 'fr'] // Список поддерживаемых языков
    }
  };
  return ENV;
};

  3. Создание файлов переводов

    Для каждой локали нужно создать соответствующие файлы переводов. Они должны быть размещены в директории translations. Например, для английского и русского языков файлы будут выглядеть так:

    • translations/en.yaml
    • translations/ru.yaml

    В этих файлах описываются ключи и их переводы. Пример для английского языка:

    greeting: "Hello, World!"

    Для русского языка:

    greeting: "Привет, мир!"

Использование переводов в шаблонах

Ember.js предоставляет удобные способы использования переводов в шаблонах. Для этого используется хелпер {{t}}, который позволяет выводить переводы для заданных ключей. Например, чтобы вывести перевод для ключа greeting, можно использовать следующий код:

<h1>{{t 'greeting'}}</h1>

Если в файле перевода для текущей локали найдено значение по ключу greeting, оно будет выведено на странице. Если перевод не найден, будет использовано значение по умолчанию.

Переключение локалей

Для изменения языка приложения в Ember.js с использованием ember-intl необходимо использовать сервис intl. С его помощью можно динамически менять язык без перезагрузки страницы.

Пример переключения локали в компоненте:

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

export default class LanguageSwitcherComponent extends Component {
  @service intl;

  switchLocale(locale) {
    this.intl.setLocale(locale);
  }
}

В этом примере создается компонент, который позволяет переключать язык, используя метод setLocale сервиса intl. Чтобы изменить язык, достаточно вызвать метод с нужным параметром, например, this.switchLocale('ru') для установки русского языка.

Форматирование данных

Кроме переводов, ember-intl также предоставляет возможности для форматирования данных, таких как даты, числа и валюты, в зависимости от локали. Это особенно полезно для корректного отображения данных в различных регионах.

Форматирование дат

Для форматирования дат в шаблонах используется хелпер {{format-date}}. Например, чтобы отобразить текущую дату в формате, соответствующем локали, можно использовать следующий код:

<p>{{format-date today}}</p>

Где today — это переменная, содержащая объект даты. В зависимости от текущей локали формат вывода даты может изменяться.

Форматирование чисел и валют

Для форматирования чисел и валют также существуют хелперы {{format-number}} и {{format-currency}}.

Пример форматирования числа:

<p>{{format-number 1234567.89}}</p>

Пример форматирования валюты:

<p>{{format-currency 1234567.89 currency="USD"}}</p>

В обоих случаях формат будет соответствовать текущей локали. Например, в русской локали число будет отображено с запятой вместо точки, а валюта будет отображаться в соответствующем формате для региона.

Заглушки для переводов

Когда ключ перевода отсутствует в файле локализации, можно настроить поведение по умолчанию с помощью заглушек. Библиотека ember-intl позволяет задать значение по умолчанию для каждого ключа, если перевод для текущей локали не найден.

Пример настройки заглушек:

greeting: 
  default: "Hello, World!"
  ru: "Привет, мир!"

В данном примере, если для русского языка нет перевода ключа greeting, будет использовано значение по умолчанию — “Hello, World!”.

Локализованные URL

В Ember.js можно создавать локализованные URL с помощью системы маршрутов. Это позволяет, например, строить URL с учетом текущей локали, что полезно для многозначных сайтов, где URL зависит от языка.

Пример локализованного маршрута:

this.route('about', { path: '/:locale/about' });

Где :locale — это параметр маршрута, который может принимать значения типа en, ru и так далее. При переходе по маршруту /ru/about приложение будет знать, что нужно отобразить контент на русском языке.

Локализация асинхронных данных

Для более сложных приложений, где данные загружаются асинхронно, важно, чтобы интернационализация учитывалась и на уровне API. Это означает, что сервер должен поддерживать локализованные ответы в зависимости от выбранной локали. Например, запросы могут отправляться с параметром Accept-Language, который будет информировать сервер о предпочтениях пользователя относительно языка.

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

Заключение

Ember.js предоставляет мощные инструменты для интернационализации, которые позволяют создать приложения, поддерживающие несколько языков и регионы. Использование библиотеки ember-intl позволяет легко управлять переводами, форматированием дат и чисел, а также динамически менять язык интерфейса. Интеграция с роутерами и асинхронными данными делает Ember.js удобным инструментом для создания многоязычных веб-приложений.

Оглавление