文章/答案/技术大牛

发布

社区首页 >问答首页 >在ScalaJS中将DOM元素传递给第三方类构造函数失败

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

Stack Overflow用户

提问于 2021-01-01 09:44:33

回答 1查看 71关注 0票数 1

在这个简单的网页中，我尝试创建一个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实现，它是上面代码的字面翻译，添加了第三方库的外观(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程序的行为不同？我的外立面定义正确了吗？

javascript

html

scala.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-01-05 23:16:36

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

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

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65526769

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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