Question

我想创建一个带有 scalatags 的可重用组件，如下所示：

<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(...)
)

但是这个解决方案的问题在于我自动生成这个元素并且通过id获取元素很麻烦，因为我必须生成唯一的ID。

有更好的方法吗？有没有办法从div中引用'myid'div？

由于

Answer 1

DOM事件回调（例如，传递给onClick := ???的内容）会收到Event的实例作为其第一个参数。该事件具有target属性，其中包含触发事件的Node（在您的情况下，将是单击的按钮）。该节点具有parentNode属性，该属性引用目标元素的父节点（元素）。在您的情况下，按钮的parentNode是您的div，您要删除的节点。所以你可以提供这种回调来删除div：

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

但是，您应该知道这种UI编程风格非常必要，并且不能很好地扩展到更大的代码库。现在有更好的方法来编写前端应用程序。例如，对于Scala.js，有一些用于管理DOM状态的库：

与React.js的接口，一个流行的JS库（SRI或scalajs-react或react4s）
Scalatags-rx
Binding.scala

还有更多，这些只是我现在记得的那些。

Answer 2

我不知道这个问题的简单答案，我很害怕，但这里有一些值得思考的东西。

就个人而言，我最终建立了一个相当精细的框架，以解决这个问题。这引入了一个概念，我最终调用了一个GadgetRef，它封装了Scala.Rx Var，它引用了Scalatags树之外的Scalatags节点，并在创建时被设置为实际节点。

例如，this page defines an Input field in one place，sets it inside the Scalatags tree和references it in other places。

这是一个相当复杂的框架，但尚未提取到一个单独的库中。所以这是一个想法，但不是解决这个问题的银弹......

使用scalatags创建可重用的组件

2 个答案: