1

我想用这样的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从 div 内部引用“myid”？

谢谢

4

2 回答 2

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 状态的库：

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

于 2017-03-07T18:37:58.753 回答
0

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

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

例如，这个页面 在一个地方定义了一个 Input 字段，将它设置在 Scalatags 树中，并在其他地方引用它。

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

于 2017-03-07T03:17:42.520 回答