Я создаю простое приложение Ember, но у меня возникли трудности с передачей закрытия действия дочернему компоненту, когда этот компонент отображается в {{outlet}} навигационного контейнера.
Для контекста здесь это быстрый взгляд на эстетически удивительное приложение, которое я создавал:
У меня есть путь roles/role, который отображает компонент (желтая секция выше) со следующим разметки. Обратите внимание, что модель для этого компонента является экземпляром роли:
// file: app/components/role.hbs
<p>{{@role.name}}</p>
<div>
{{sel-nav-tabs items=this.tabConfig}}
<div class='route-content'>{{outlet}}</div>
</div>
(где «sel» обозначает «чужую библиотеку».)
this.tabConfig определяется в соответствующий класс:
// file: app/components.role.js
import Component from '@glimmer/component';
export default class RoleComponent extends Component {
get tabConfig() {
return [
{ label: 'Users', route: 'roles.role.users' },
{ label: 'Privileges', route: 'roles.role.privileges' },
];
}
}
В розетку в role.hbs будет выведен соответствующий компонент списка, либо users, либо privileges.
Список пользователей отображается следующим составная часть. Обратите внимание, что модель представляет собой список экземпляров User, связанных с ролью, из ее родителя:
// file: app/components/role/user-list.hbs
<ul>
{{#each @users as |user|}}
<li>
{{user.name}}
{{#sel-button type="toolbar" onActivate=this.removeUser}}
{{sel-icon/remove-circle}}
{{/sel-button}}
</li>
{{/each}}
</ul>
, и при нажатии кнопки вызывается действие, определенное в классе RoleUserListComponent:
// file: app/components/role/user-list.js
import Component from '@glimmer/component';
import { action } from "@ember/object";
export default class RoleUserListComponent extends Component {
@action removeUser(user) {
// remove the user model from the role... but which role?
}
}
Суть в том, что отношения между пользователями и ролями очень многим, поэтому я не могу просто сбросить владельца пользователя и позволить Ember Data позаботиться обо всем. Очевидный ответ казался передачей закрытия действия от компонента роли его дочернему компоненту списка пользователей.
За исключением того, что, похоже, нет способа передать закрытие действия через {{outlet}}. То, на что я надеялся, было что-то вроде:
{{outlet onActivate=(action removeUser @role)}}
, которое передавало бы закрытие любому компоненту, который там отображался. Вместо этого я попытался использовать {{yield user}} в дочернем объекте, чтобы родительский элемент отобразил кнопку удаления и дал ей соответствующее действие, но это также коснулось стены выхода.
Я также попытался использовать контроллеры, которые не ' Это хорошо задокументировано, вероятно, поскольку их роль, похоже, резко изменилась по мере взросления Эмбер. Но хотя в этом кратком объяснении упоминается передача действий, оно не go в деталях, и несколько найденных мною современных примеров, похоже, ломаются, когда выход присоединяется к партии.
Я подозреваю, что {{outlet}} просто не подходит для закрытия.
Хотя определение службы, вероятно, сработает, это не то, для чего предназначены службы, и Я бы захламлял свое глобальное пространство, чтобы решить локальную проблему.
Какова лучшая практика (или, на самом деле, любая практика) для работы с получением сообщений через торговые точки? Я искал способы запроса более ранних частей пути, но я не нашел ни одного, который был определен в соответствующих классах.
РЕДАКТИРОВАТЬ, чтобы добавить больше деталей:
Шаблон маршрута для /roles/role это просто:
// file app/templates/roles/role
{{role role=@model}}
Где компонент Role находится в первом списке выше. (Я также добавил роль. js содержимое файла выше.) Моя причина для этого заключалась в том, что, создав компонент, я создал логическое место для размещения конфигурации (а не встроенных вспомогательных функций), и это просто дало мне ощущение аккуратность, чтобы все элементы пользовательского интерфейса были в компонентах.
Если рефакторинг может быть якорем для хорошего решения (по сути, копирования всего компонента Role в шаблон маршрута), я с удовольствием это сделаю.