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

如何解决在 ScalaJS 中将 DOM 元素传递给第 3 方类构造函数失败

在这个简单的网页中，我尝试创建一个 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,3),List(4,6),List(7,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 程序不同？我的外观定义正确吗？

解决方法

您的示例唯一出现错误的是您如何将 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)
)

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

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

如何解决在 ScalaJS 中将 DOM 元素传递给第 3 方类构造函数失败

解决方法

相关推荐