Создание компонента многократного использования со скалатагами

Question

Я хотел бы создать компонент многократного использования с такими скалятами, как этот:

<div class="container">
  <button>Delete me</button>
  <div class="actual-content">
    ...
  </div> 
</div>

и я хотел бы зарегистрировать onclick слушатель кнопки, которая удаляет весь div Контейнер при нажатии.

Я знаю, что я могу сделать что-то вроде этого (с JQuery):

div(id:="myid")(
  button(onclick:={() => jQuery("#myid").remove()}(Delete me),
  div(...)
)

но проблема с этим решением состоит в том, что я генерирую этот элемент автоматически, и получение элемента по идентификатору является обременительным, потому что мне придется генерировать уникальные идентификаторы.

Есть ли способ лучше? Есть ли способ сослаться на "myid" div изнутри div?

Спасибо

Answer 1

Обратные вызовы DOM Event (например, что вы передаете onClick := ???) получить экземпляр Event как их первый параметр. Это событие имеет target свойство, которое содержит Node событие, которое было вызвано (в вашем случае это будет нажатие кнопки). Этот узел имеет parentNode свойство, которое ссылается на родительский узел (элемент) целевого элемента. В вашем случае кнопки parentNode ваш div, узел, который вы хотите удалить. Таким образом, вы можете предоставить такой обратный вызов для удаления div:

def clickHandler = (event: Event): Unit = {
  val myDiv = event.target.parentNode
  myDiv.parentNode.removeChild(myDiv)
}

Тем не менее, вы должны знать, что этот стиль программирования пользовательского интерфейса очень важен и не подходит для больших кодовых баз. В настоящее время существуют лучшие способы написания приложений для веб-интерфейса. Например, для Scala.js есть несколько библиотек для управления состоянием DOM:

• Интерфейсы для React.js, популярной библиотеки JS ( SRI или scalajs-реагировать или реагировать)
• Scalatags-гх
• Binding.scala

Есть еще, это только те, которые я помню сейчас.

Answer 2

Боюсь, я не знаю простого ответа на этот вопрос, но вот немного пищи для размышлений.

Лично я завел довольно сложную основу для решения этой проблемы среди других. Это вводит понятие, что я в конечном итоге вызываю GadgetRef, который инкапсулирует переменную Scala.Rx, которая ссылается на узел Scalatags вне дерева Scalatags, и получает значение фактического узла при его создании.

Так, например, эта страница определяет поле ввода в одном месте, устанавливает его внутри дерева Scalatags и ссылается на него в других местах.

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