在 scala-js 应用程序中使用 bootstraptoggle 的 onclick 事件

Question

在我的 scala-js 应用程序中，我想使用 bootstraptoggle 库来创建一个漂亮的切换按钮。

到目前为止，我正在通过看起来有点像这样的方法创建切换按钮：

import scalatags.JsDom
import scalatags.JsDom.all._
// ...


def createToggleButton(): JsDom.TypedTag[Input] = {
  def onClick = println("HELLO WORLD!")
  input(id := "myToggle",
        attr("data-toggle") := "toggle",
        `type` := "checkbox",
        onclick := onClick,
        attr("data-on") := "ON",
        attr("data-off") := "OFF",
        attr("data-onstyle") := "success",
        attr("data-width") := "85",
        attr("data-height") := "26")
}

渲染它并将其添加到我的 DOM 时，它看起来像这样：

到目前为止一切正常。然而，奇怪的是：呈现页面 ('F5') 时，我的控制台 (Chrome - 'F12') 从一开始就显示一个 'HELLO WORLD!' 输出。之后，onclick 事件似乎不再触发。

有人知道如何解决这个问题吗？

Answer 1

您应该将 () => action() 形式的函数赋予属性 onclick。当前，您正在评估 def onClick 一次，并将该函数调用的结果（即 () 值）存储在 onclick 属性中。相反，你应该写

onclick := { () => onClick }

Answer 2

由于我无法使 bootstrap-切换工作，我决定自己制作。所以，这是我的解决方案：ToggleSwitchWithLabels.scala

在 scala-js 应用程序中使用 bootstraptoggle 的 onclick 事件

Using bootstraptoggle's onclick event in a scala-js application

scala

twitter-bootstrap

scala.js

scalatags