Мои коллеги и я недавно столкнулись с этой проблемой при создании интерфейса автозаполнения. Наша проблема заключалась в том, что ввод должен обрабатывать нажатия клавиш и изменять «активный» параметр автозаполнения, а также выбирать его при нажатии клавиши «вкладка» или «ввод», однако автозаполнение также хочет управлять «активным» вариант с помощью мыши и выберите его по щелчку.

Мы начали с того, что автозаполнение оборачивало ввод и выдавало «активную» опцию автозаполнения, а затем автозаполнение могло обрабатывать клавиши со стрелками вверх/вниз, а ввод — нажатие клавиши ‹enter› (выбирая активную опцию). Таким образом, проблема заключалась в том, чтобы щелкнуть параметр из раскрывающегося списка с помощью мыши. Как мы можем указать дочернему компоненту ввода выбрать этот вариант?

Решения, которые мы придумали, были:

  • Зарегистрируйте дочерний компонент с родительским компонентом, чтобы родитель мог вызывать дочерний компонент (как хорошо описано в вашем посте здесь).
  • Пусть оба компонента используют службу с событиями, а в дочернем методе init подпишитесь на соответствующие события. Затем в родительском компоненте действие просто выполняло бы messageService.trigger('relevantEvent', 'some', 'additional', 'args') (это то, что мы в итоге сделали).
  • Используйте компонент-оболочку для управления общим состоянием.
    По сути, это то, что делает отличный аддон ember-power-select. Он создает этот объект publicAPI в компоненте-оболочке и передает его повсюду. Он имеет общее состояние и действия для изменения этого состояния.

Третье решение, вероятно, самое «Ember-y», однако потребовало бы от нас самого большого рефакторинга, и оно не стоило заморачиваться. Может быть, следующая проблема, с которой мы столкнемся, потребует этого.