Как мы знаем, одним из руководящих принципов Ember является инкапсуляция состояния в маршруте Ember. Проще говоря, это означает, что URL-адрес должен сообщать приложению все, что ему необходимо знать о состоянии страницы.

  • Да, это означает модальные окна (обычно параметр запроса)
  • Да, это означает ресурсы (параметр пути, как правило)
  • Да, вы видите, куда это идет

К сожалению, даже со всеми инструментами (серьезные ребята из реквизита) вложенные маршруты могут быть трудными для новичков.

Пример репозитория GitHub: https://github.com/rmharrison/example-ember-nested-routes

Подсказка 1: не использовать Ember CLI

`ember g route ‹route_name›` — ваш друг.

  • Используй это.
  • Всегда.
  • Я серьезно
>>> ember g route bacon

Я видел, как даже старшие разработчики тратили на отладку больше времени, чем хотели бы (часы!?), потому что они пропускали уровень вложенности либо в app/router.js, либо в своей структуре каталогов. Я знаю, что это звучит тривиально, но вы видите проблему здесь:

Подсказка 2: не использовать Ember CLI

CLI также поддерживает создание вложенных маршрутов, подобно mkdir -p. К сожалению, функции рекурсивного создания нет.

>>> ember g route bacon/lettuce/tomato/aioli

Создаст только последний дочерний элемент. Он не создает промежуточные файлы HBS.

app/
└── templates/
    └── bacon/
        └── lettuce/
            └── tomato/
                ├── aioli/
                └── aioli.hbs

Подсказка 3: `index.hbs` против `‹route_name›.hbs`

app/template/bacon.hbs и app/template/bacon/index.hbs различны.

app/                  |     | app/
└── templates/        | !=  | └── templates/
    └── bacon/        | ne  |     ├── bacon/
        └── index.hbs |     |     └── bacon.hbs

По умолчанию Ember CLI создаст app/template/bacon.hbs.

app/template/bacon/index.hbs будет толькоотображаться на индексном маршруте: https://host/bacon.

app/template/bacon/index.hbsбудетне вызываться при вызовах вложенных маршрутов: `https://host/bacon/1` .

app/template/bacon.hbs будет отображаться для обоих URI.

| URL                  | bacon/index.hbs | bacon.hbs |
|----------------------|-----------------|-----------|
| https://host/bacon   | Y               | Y         |
| https://host/bacon/1 | N               | Y         |

Подсказка 4: Неправильное использование `{{outlet}}`

Если вы не используете `{{outlet}}`, ваши дочерние элементы не будут отображаться на странице.

Также полезно использовать соответствующий хелпер (`{{outlet}}`, `{{render}}`, `{{yield}}`), но это уже другая тема.