обмен сообщениями между нативными веб-компонентами v1 - PullRequest
Новая
       6

обмен сообщениями между нативными веб-компонентами v1

0 голосов
/ 07 сентября 2018

У меня есть два встроенных веб-компонента во вложенной конфигурации, как показано ниже 

<top-nav theme="aqua">
  <nav-link selected>Dashboard</nav-link>
  <nav-link>Settings</nav-link>
  <nav-link>Profile</nav-link>
  <nav-link>Logout</nav-link>
</fancy-tabs>

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

Простейшее использование-case - установить ссылку для выбора.

По умолчанию на панели мониторинга выбрана ссылка.

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

Я думаю запустить событие из элемента, по которому щелкнули, перехватить событие в элементе top-nav, затем просмотреть все дочерние элементы и удалить выбранные.приписать, если элемент не является источником события.

Но это выглядит очень подходом эпохи Jquery, и что-то не так в этом.

Есть другие идеи?

1 Ответ

0 голосов
/ 07 сентября 2018

Одно из решений:

  • сохранить ссылку на текущий выбранный элемент
  • для прослушивания событий клика на уровне контейнера <top-nav>,
  • когда вы перехватываете событие event, осмотрите его target, чтобы получить <nav-link> дочернего по нажатию
  • обновить старые и новые <nav-link> элементы. 

selected = tn.querySelector('nav-link[selected]')
tn.addEventListener('click', ev => {
  if (selected != ev.target) {
    selected.removeAttribute('selected')
    selected = ev.target
    selected.setAttribute('selected', '')
  }
})
nav-link { cursor: pointer }
nav-link[selected] { background-color: yellow }
<top-nav id="tn" theme="aqua">
  <nav-link selected>Dashboard</nav-link>
  <nav-link>Settings</nav-link>
  <nav-link>Profile</nav-link>
  <nav-link>Logout</nav-link>
</top-nav>
...