如何将 Javascript 类转换为 ScalaJS

Question

我有这个简单的 JavaScript 代码：import Modeler from 'bpmn-js/lib/Modeler';import diagramXML from './diagram.bpmn';const modeler = new Modeler({  container: '#canvas'});modeler.importXML(diagramXML);在浏览器中打开时会显示一个图表。我想在ScalaJS中执行此操作，但我错过了一些东西。这是我的代码：@JSImport("resources/diagram.bpmn", JSImport.Default)@js.nativeobject DiagramXML extends js.Objectobject Main {  @JSExportTopLevel("main")  def main(): Unit = {    val modeler = new Modeler(js.Object(      "container" -> "#canvas"    ))   modeler.importXML(DiagramXML.toString) }}这是我的外观Modeler：@js.native@JSImport("bpmn-js/lib/Modeler", "Modeler")class BpmnJS(options: js.Object) extends js.Object {  def importXML(xml: String): js.Promise[Any] = js.native}当我调试时，xml 已正确加载。所缺少的只是它在 DOM 中正确呈现。

Answer 1

我可以确定您的翻译中的两个问题。第一个是import的bpmn-js。JS 导入是

import Modeler from 'bpmn-js/lib/Modeler';

应该翻译成

@JSImport("bpmn-js/lib/Modeler", JSImport.Default)

根据翻译成的文档import@JSImport。

另一个问题则更为微妙。在您的调用中new Modeler，您有

js.Object(

  "container" -> "#canvas"

)

它（也许不幸的是）编译但不做你认为它做的事情。它创建两个字符串的 Scala 元组，该元组被传递给 JavaScript 函数，Object(...)该函数实际上会按原样返回它（因为 Scala 元组已经是一个对象）。

您想要的是一个带有字段的 JavaScript 对象container，您可以将其写为

new js.Object {

  val container = "#canvas"

}

更好的方法是在外观中使选项对象静态类型化：

class BpmnJS(options: BpmnJSOptions) extends js.Object {

  ..

}

trait BpmnJSOptions extends js.Object {

  var container: js.UndefOr[String] = js.undefined

}

这样，您就可以将其称为

new BpmnJS(new BpmnJSOptions {

  container = "#canvas"

})