Блог

На моей странице есть несколько вкладок, которые ссылаются на некоторые внутренние маршруты. Когда пользователь нажимает на вкладку, маршрут должен быть отображен, а также вкладка должна быть выделена, но один раз за несколько кликов подсветка не смещается на новую вкладку, и старая вкладка остается выделенной, но маршрут выбранной вкладки отображается.

Выделение выполняется действием внутри тега li, а #link-to вложен внутрь тега li.

В моем исследовании до сих пор я обнаружил, что, когда это происходит, событие click не регистрируется. Я получаю кучу событий мыши, но события щелчка нет. Похоже, что событие click исчерпано.

 <ul class="nav nav-tabs">
 {{# each tab in tabBars}}
   <li {{action 'someAction'}}>{{#link-to tab.link}}{{/link-to}}</li>
 {{/each}}
</ul>
  

Действие должно запускаться каждый раз, когда нажимается вкладка, и новая вкладка должна быть выделена.

Попробуйте вместо этого сделать что-то подобное:

 {{#link-to tab.link tagName='li'}}click me{{/link-to}}
  

(и опустите <li> тег).

Затем вы можете проверить, есть ли active класс, чтобы выделить li элемент.

{{link-to}} Помощник выводит ссылку, которая получит дополнительную, class="active" если ссылка соответствует текущему маршруту. Затем вы можете оформить это с помощью CSS.

Смотрите https://guides.emberjs.com/v1.10.0/templates/links / и выполните поиск «активный».

Другие варианты

Поскольку {{link-to}} вызовет перехват tab.link маршрута beforeModel , возможно, именно в этом месте вы могли бы захотеть установить для свойств, связанных с представлением, значение «данные сброшены» на <li> . Я бы лично приберег этот хук для бизнес-логики.

Когда мне абсолютно необходимо запустить действие перед переходом (обычно это когда я хочу запустить что-то вроде события отслеживания), я использую действие invokeAction закрытия, которое поставляется с аддоном ember-link-action, хотя похоже, что он может поддерживать только 1.13.13

 {{link-to invokeAction=(action "someAction")}}
  

Лучшая практика

Для действия в <li> элементе обычно лучше избегать установки действий на неинтерактивных элементах, поскольку это создает проблему доступности для пользователей вспомогательных технологий (см. недопустимый интерактив).

Однако это не означает, что вы должны превратить <li> элемент в интерактивный элемент, сделав что-то связанное <li role="button"> , поскольку это нарушает другие опасения a11y (см. no-nested-interactive).

Я нашел решение, которое не требует действий:

 <ul class="nav nav-tabs">
    {{#each tab in tabs}}
        {{#link-to tab.link id=tab.id tagName='li' }}<a>{{tab.title}}</a>{{/link-to}}
    {{/each}}
</ul>
  

ссылка на маскирующийся под li и имеющий внутри него фиктивный якорь.