Некоторое время назад мне дали задание построить индикатор выполнения в проекте Ember. Дизайн не имеет значения для этой (небольшой) статьи. Требования были следующие:

  • У шага может быть 3 состояния: завершено, текущее, нужно сделать.
  • Пользователь может самостоятельно перейти к выполненным ранее шагам, щелкнув шаг
  • Шаги, которые необходимо сделать, должны быть отключены, то есть пользователь не может перейти к шагу, который нужно сделать, через индикатор выполнения.

Первая итерация: использование помощника {{# link-to}}

Прочитав требования, я сразу же подумал об использовании помощника {{# link-to}} для выполнения действий. Это позволяет пользователям перемещаться между страницами и иметь разные стили для каждого состояния.

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

После некоторого исследования я нашел гораздо лучшее решение: создать свой собственный компонент ссылки.

Вторая (и последняя) итерация: использование LinkComponent

Использование LinkComponent позволяет создать собственный полностью настраиваемый компонент ссылки без использования {{# link-to}}. Как указано в документации API:

LinkComponent отображает элемент, событие click которого запускает переход экземпляра приложения Router на предоставленный маршрут по имени. LinkComponent компоненты вызываются с помощью {{# link-to}}.

Вот оно, окончательное решение. Создал свой собственный компонент ссылки со всей логикой. Я мог оставить только component.js, сохранив всю свою логику там. Затем я просто вызвал свой компонент ссылки как обычный {{# link-to}}.

Последние мысли

В заключение, LinkComponent следует использовать для создания настраиваемого {{# link-to}}, когда требуется, чтобы к вашей ссылке было прикреплено много логики. Это также позволяет вам протестировать этот компонент независимо и убедиться, что он имеет правильное поведение в разных состояниях.

{{# link-to}} следует использовать во всех других (более простых) случаях. Не стоит создавать LinkComponent только для добавления пользовательских стилей или пользовательского tagName. В таких случаях я рекомендую использовать помощник {{# link-to}} напрямую и настроить его в шаблоне.

Спасибо за чтение. Надеюсь, вам понравилось это мини-руководство о том, как создать собственный {{# link-to}} помощник с помощью LinkComponent. Любые отзывы приветствуются. Увидимся в следующий раз!