使用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

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、卡拉杰-反应或react4s)
• Scalatags
• Binding.scala

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

Answer 2

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

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

例如，此页 在一个地方定义输入字段、将其设置在Scalatag树中。和在其他地方引用它。

不过，这是一个相当复杂的框架，还没有被提取到单独的库中。所以这是个主意，但不是解决问题的灵丹妙药.