使用 scalatags 创建可重用组件

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

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

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

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

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

Answer 2

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 or scalajs-react or react4s)
Scalatags-rx
Binding.scala

还有很多，暂时就记住这些了

使用 scalatags 创建可重用组件

Creating a reusable component with scalatags

scala.js

scalatags