En En

Установка дополнений


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

Чтобы посмотреть дополнения, посетите сайт Ember Observer. На этом сайте дополнения, которые были опубликованы в NPM, рассортированы по каталогам и категориям. Также им присвоены оценки на основе ряда критериев.

Для Super Rentals мы используем два дополнения: ember-cli-tutorial-style и ember-cli-mirage.

ember-cli-tutorial-style

Вместо того чтобы копировать/вставлять код в CSS для стилизации Super Rentals, мы создали дополнение ember-cli-tutorial-style, которое сразу добавляет CSS в руководство. Дополнение работает следующим образом: оно создает файл ember-tutorial.css и вкладывает его в директорию vendor super-rentals. При запуске Ember CLI берет файл CSS ember-tutorial и вкладывает его в vendor.css (который ссылается на /app/index.html). Мы можем вносить дополнительные корректировки в стиль в /vendor/ember-tutorial.css. Изменения вступят в силу после перезапуска приложения.

Запустите следующую команду, чтобы установить дополнение:

ember install ember-cli-tutorial-style

Так как дополнения — npm-пакеты, команда ember install устанавливает их в директорию node_modules и создает запись в package.json. Не забудьте перезапустить сервер после установки дополнения. После перезапуска сервера новый CSS будет включен в проект. Обновите окно браузера и увидите следующую картину:

styled super rentals basic

ember-cli-mirage

Mirage — библиотека HTTP-заглушек, которая часто используется в Ember для приемочного тестирования со стороны клиента. В нашем руководстве мы будем использовать mirage как источник данных. Mirage позволит нам создавать фиктивные данные, которые мы будем использовать во время разработки приложения, и имитировать работу внутреннего сервера.

Установите дополнение Mirage следующим образом:

ember install ember-cli-mirage

Если вы запускали ember serve в другой оболочке, перезапустите сервер, чтобы добавить Mirage в сборку.

Теперь настроим Mirage, чтобы возвращать объекты rental, которые мы определили выше. Для этого обновляем /mirage/config.js:

mirage/config.js

export default function() {
  this.namespace = '/api';

  this.get('/rentals', function() {
    return {
      data: [{
        type: 'rentals',
        id: 'grand-old-mansion',
        attributes: {
          title: 'Grand Old Mansion',
          owner: 'Veruca Salt',
          city: 'San Francisco',
          type: 'Estate',
          bedrooms: 15,
          image: 'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg'
        }
      }, {
        type: 'rentals',
        id: 'urban-living',
        attributes: {
          title: 'Urban Living',
          owner: 'Mike Teavee',
          city: 'Seattle',
          type: 'Condo',
          bedrooms: 1,
          image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg'
        }
      }, {
        type: 'rentals',
        id: 'downtown-charm',
        attributes: {
          title: 'Downtown Charm',
          owner: 'Violet Beauregarde',
          city: 'Portland',
          type: 'Apartment',
          bedrooms: 3,
          image: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg'
        }
      }]
    };
  });
}

Такая настройка Mirage предполагает, что когда Ember Data будет делать запрос GET к /api/rentals, Mirage вернет этот объект JavaScript как JSON. Чтобы это работало, наше приложение, по умолчанию, должно делать запросы в пространстве имен /api. Без этого изменения переход в приложении в /rentals будет конфликтовать с Mirage.

Чтобы внести изменение, нам нужно сгенерировать адаптер приложения.

ember generate adapter application

Этот адаптер расширит базовый класс JSONAPIAdapter из Ember Data:

app/adapters/application.js

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  namespace: 'api'
});

Комментарии (8)

  1. Kontsantin 09 ноября 2016, 14:16 # 0
    Чего-то не работает по пути /api/rentals
    1. Сергей 29 ноября 2016, 19:46 # 0
      Здесь пропущена строчка:
      -Внести изменения в adapter/application.js
    2. Андрей 23 января 2017, 21:38(Комментарий был изменён) # 0
      Установил Mirage, внес необходимые изменения (как описано в данном руководстве). Однако, данные по прежнему берутся из app/routes/rentals.js, как в разделе Hook Model.
      Подскажите, что еще нужно изменить?
      Спасибо
      1. Александр 24 января 2017, 11:25 # 0
        Проверьте у вас файл app/adapters/application.js создан и все ли там правильно указано.
        1. Андрей 24 января 2017, 16:03 # 0
          Спасибо за ответ!
          Файл проверил. Там все в точности, как в руководстве, ничего не пропустил. Ответ нашелся в разделе Использование Ember Data: заработало после обновления hook model (app/routes/rentals.js)
          1. Александр 24 января 2017, 16:07 # 0
            Ну видимо сразу отдавали массив, поэтому запрос не уходил. Если будут еще вопросы, лучше задавайте их в группе в VK
            1. Андрей 24 января 2017, 16:21 # 0
              А в ФБ есть группа? А то меня в ВК давно нет
              1. Александр 24 января 2017, 16:21 # 0
                Пока нет, только в VK
      Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.