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

Question

在这个简单的网页中，我尝试创建一个 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 将其构造函数存储在 window 对象中）：

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 程序不同？我的外观定义正确吗？

Answer 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)
)

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

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

Passing DOM element to 3rd-party class constructor fails in ScalaJS

html

javascript

scala.js