Сохраняйте application.hbs минимальным и общим для всех маршрутов.Что вы должны сделать, это сгенерировать маршруты верхнего уровня для вашего приложения.
Скажем, у вас есть общие настройки, где у вас есть аутентифицированный раздел, пост-вход в систему и раздел входа в систему.Как до, так и после входа в систему обычно используются разные шаблоны верхнего уровня.Попробуйте что-то вроде этого:
ember g маршрут входа ember g маршрут входа в систему / индекс ember g маршрут входа в систему / забытый пароль ember g маршрут аутентификации ember g маршрут аутентификации / индекс ember g маршрут аутентификации / профиль и т. Д ...
Ваш login.hbs будет иметь свой собственный стиль и, возможно, дочерние маршруты, которые будут предполагать этот стиль и помещать последующие вложенные шаблоны в {{outlet}}, о котором упоминали другие.
Структура файла:
routes/
-login/
----index.hbs
----forgot-password.hbs
-authenticated/
----index.hbs
----profile.hbs
login.hbs
authenticated.hbs
application.hbs
В приведенном выше примере login.hbs может выглядеть следующим образом:
{{yellow-navbar}}
{{outlet}}
и authenticated.hbs вот так:
{{pink-navbar}}
{{user.name}}
{{outlet}}
Теперь,шаблоны login / index.hbs и login / забытый пароль.hbs будут отображаться в выходе login.hbs.обе эти страницы будут отображать желтую навигационную панель, а затем свой собственный контент.
Поскольку authenticated.hbs является другим родительским маршрутом верхнего уровня, и authenticated / index.hbs, и authenticated / profile.hbs отобразят свое содержимое подрозовая панель навигации и отображение имени текущего пользователя.
, если ваш application.hbs выглядел следующим образом:
{{#general-site-container}}
<h2>Website Name</h2>
{{outlet}}
{{/general-site-container}}
Тогда все маршруты, как аутентифицированные, так и вход в систему, будут вgeneral-site-container, и все покажут h2 с именем веб-сайта.
Важное замечание в этом, и кое-что, что я вижу, многие путают, - то, что эта структура папок недиктовать фактический путь маршрута.
Маршрутизатор может быть настроен следующим образом, чтобы не отображать «authenticated» в URL: Router.js
// login.index route assumed at root url /login
this.route('login', { path: '/login' }, function() {
// avail at /login/forgot-password
this.route('forgot-password', { path: '/forgot-password' }
});
//authenticated.index.hbs assumed at root avail at /
//notice that the authenticated parent route has a route of "/"
this.route('authenticated', { path: '/' }, function() {
// authenticated.profile route avail at /profile
this.route('profile', { path: '/profile' });
// as an exmaple you can further nest content to your desire
// if for instance your profile personal info section has a parent
// template/route
this.route('', { path: '/personal-info' }, function() {
this.route('address', { path: '/address' }); //profile/personal-info/address
});
});