#ember.js
#ember.js
Вопрос:
На моей странице есть несколько вкладок, которые ссылаются на некоторые внутренние маршруты. Когда пользователь нажимает на вкладку, маршрут должен быть отображен, а также вкладка должна быть выделена, но один раз за несколько кликов подсветка не смещается на новую вкладку, и старая вкладка остается выделенной, но маршрут выбранной вкладки отображается.
Выделение выполняется действием внутри тега 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>
Действие должно запускаться каждый раз, когда нажимается вкладка, и новая вкладка должна быть выделена.
Ответ №1:
Попробуйте вместо этого сделать что-то подобное:
{{#link-to tab.link tagName='li'}}click me{{/link-to}}
(и опустите <li>
тег).
Затем вы можете проверить, есть ли active
класс, чтобы выделить li
элемент.
Ответ №2:
{{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).
Ответ №3:
Я нашел решение, которое не требует действий:
<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 и имеющий внутри него фиктивный якорь.