在 ScalaJS 中将 DOM 元素传递给第 3 方类构造函数失败答案

【问题标题】：Passing DOM element to 3rd-party class constructor fails in ScalaJS在 ScalaJS 中将 DOM 元素传递给第 3 方类构造函数失败
【发布时间】：2021-04-08 03:02:10
【问题描述】：

在这个简单的网页中，我正在尝试创建一个Handsontable 网格：

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<body>
  <div id="grid-viewer"></div>
</body>

<script src="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.js"></script>

<!-- SOLUTION 1 -->
<script type="text/javascript" src="./grid.js"></script>

<!-- SOLUTION 2 -->
<script type="text/javascript" src="./target/scala-2.13/scalajs-bundler/main/grid-fastopt-bundle.js"></script>

</html>

解决方案 1 是纯 JavaScript 实现，效果很好：

const config = {
    data: [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9]
    ],
    rowHeaders: true,
    colHeaders: true,
    licenseKey: "non-commercial-and-evaluation"
}

window.addEventListener('load', ev => {
    const element = document.getElementById('grid-viewer');
    const grid = new Handsontable(element, config);

    console.log(element);  // prints <div>...</div>
    console.log(config);   // prints the object { … }
});

解决方案 2 是一个 Scala.js 实现，它是从上面的代码直译而来，并为第 3 方库添加了外观（Handsontable 将其构造函数存储在窗口对象中）：

package example

import org.scalajs.dom
import scala.scalajs.js
import scala.scalajs.js.annotation.JSGlobal

@js.native
@JSGlobal("Handsontable")
class Handsontable(element: dom.raw.Element, conf: js.Object) extends js.Object

object Example {
  def main(args: Array[String]): Unit = {
    object config extends js.Object {
      val data = List(
        List(1, 2, 3),
        List(4, 5, 6),
        List(7, 8, 9)
      )
      val rowHeaders = true
      val colHeaders = true
      val licenseKey = "non-commercial-and-evaluation"
    }

    dom.window.addEventListener("load", { ev: dom.Event =>
      val element = dom.document.getElementById("grid-viewer")
      val grid = new Handsontable(element, config)

      println(element)  // prints [object HTMLDivElement]
      println(config)   // prints [object Object]
    })
  }

}

Scala.js 解决方案调用构造函数，但随后以 TypeError: element is undefined 失败。 println 调用的输出让我相信 element 不是元素本身，而是一个包装器。

这是我的 sbt 配置：

enablePlugins(ScalaJSPlugin)        // 1.3.1
enablePlugins(ScalaJSBundlerPlugin) // 0.20.0

scalaVersion := "2.13.4"

scalaJSUseMainModuleInitializer := true

libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "1.1.0"

为什么我的 Scala.js 程序的行为与等效的 JS 程序不同？我的外观定义正确吗？

【问题讨论】：

> println 调用的输出让我相信 element 不是元素本身，而是一个包装器。这只是因为console.log / println 将 HTML 元素转换为字符串的方式不同。

标签： javascript html scala.js

【解决方案1】：

您的示例中唯一出现错误的是您如何将 data 传递给配置：List 是一种 Scala 类型，对 JavaScript 代码是不透明的（即无意义的）。相反，您需要使用js.Array：

val data = js.Array(
  js.Array(1, 2, 3),
  js.Array(4, 5, 6),
  js.Array(7, 8, 9)
)

这是否是问题的根源很难说，因为错误消息没有上下文。

【讨论】：

嗯，就是这样！只需切换到js.Array 即可解决问题。谢谢！