Как мы знаем, одним из руководящих принципов 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}}`), но это уже другая тема.