使用scalatags创建可重用组件答案

【问题标题】：Creating a reusable component with scalatags使用scalatags创建可重用组件
【发布时间】：2017-07-27 00:09:24
【问题描述】：

我想用 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？

谢谢

【问题讨论】：

标签： scala.js scalatags

【解决方案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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：