7

我想用 scala.js 在 Polymer 2.0 项目中开发一些 web 组件。虽然github 上有一个精彩的演示项目，展示了它如何与 Polymer 1.0 一起使用。我无法获得与 Polymer 2.0 和本机元素注册技术类似的东西。

一个简单的外观可能如下所示

@ScalaJSDefined
class PolymerElement extends PolymerBase {
  def is: String = ""
  def properties: js.Dynamic = js.Dynamic.literal()
}

@js.native
@JSGlobal("Polymer.Element")
class PolymerBase extends HTMLElement

实际元素： 

@JSExportTopLevel("MyElement")
@ScalaJSDefined
class MyElement extends PolymerElement  {

   private var label = "init"

   override def is = "my-element"

   override def properties = js.Dynamic.literal(
    "label" -> Map(
      "type" -> "String",
      "value" -> "init",
      "notify" -> true
    ).toJSDictionary
  )

  def testMe = {
    println(label)
  }
}

object MyElement {
  @JSExportStatic
  val is: String = MyElement.is

  @JSExportStatic
  val properties: js.Dynamic = MyElement.properties

}

无论我是采用旧样式元素注册Polymer(MyElement)还是平台原生变体window.customElement.define(MyElement.is, MyElement) ，它显然都会抛出异常，MyElement因为new MyElement. 它抛出异常：

Uncaught TypeError: Class constructor PolymerElement cannot be invoked without 'new'

学习Scala.js 外观编写指南，我已经尝试了很多外观变体声明PolymerElement和PolymerBase 抽象。

我想到的一个可能的解决方案是，编写一个本机 JavaScript 类，它确实是可实例化的，并@js.native在它们上使用外观。但我正在寻找一种使用Scala.js 0.6.16提供的东西来实现它的方法。

4

1 回答 1

1

更新版本 (2018-04)

好的，这可能对其他人也有帮助，我决定发布我的新版本。

我正在使用这个纯 ScalaJS 解决方案与 Polymer2/CustomElements 集成。

我的环境是：

  • 斯卡拉：2.12
  • ScalaJS：0.6.22
  • 并且 ："org.scala-js" %%% "scalajs-dom" % "0.9.2"

ScalaJS 选项：

"-P:scalajs:sjsDefinedByDefault"

我为 CustomElements 和 Polymer 2 创建了一些 ScalaJS 外观并在此处发布它们 - https://bitbucket.org/latestbit/scalymer/src/tip/src/main/scala/org/latestbit/sjs/polymer2/?at=默认

它们不是功能齐全的 Polymer 立面，只是处于初始状态，但它们正在为我工​​作。

而且您可以轻松使用它们，而无需任何技巧，例如：

@JSExportTopLevel(name = "TestElement")
class TestElement() extends Polymer.Element {

    override def connectedCallback(): Unit = {
        super.connectedCallback()
        global.console.log(s"Attribute name ${getAttribute("name")}. Body is ${dom.document.querySelector("body")}")
        global.console.log(s"${this.$.selectDynamic("testCl")}")
        global.console.log(s"${$$("testCl")}")
    }
}


object TestElement {
    @JSExportStatic
    def is = "test-element"

    @JSExportStatic
    def properties = js.Dictionary(
        "name" -> js.Dictionary(
            "type" -> "String"
        )
    )
}

然后在 Scala 中也注册它，如：

object TestJsApplication {

    def main() : Unit = {
        Globals.customElements.define(TestElement.is,
            js.constructorOf[TestElement]
        )
    }

}

html部分是通常的：

<dom-module id="test-element">

    <template>
        <span id="testCl">Not much here yet.</span>
        This is <b>[[name]]</b>.
    </template>

</dom-module>

您将在此处找到完整的示例 - https://bitbucket.org/latestbit/scalymer/src

旧的尝试解决（出于历史目的）

好的，这是我找到的最好的“解决方案”。

这并没有完全解决它，但我希望这将是一个有用的技巧，同时我们期待 sjs 在这方面的改进。

  1. 获取任何库来“混合”js 类。我用过https://github.com/rse/aggregation。

  2. 创建您的 ScalaJS 组件，但不要尝试直接从 Polymer.Element 继承它：

@ScalaJSDefined
@JSExportTopLevel("TestPolymerElement")
class TestPolymerElement extends js.Object {
    def test = g.console.log("Hello from scala")
}

object TestPolymerElement {
    @JSExportStatic
    def is = "test-polymer-element"
}
  1. 创建一个 JS 纯“伴侣”类来继承 Polymer.Element 和 ScalaJS 组件作为 mixin 并注册它：
class TestPolymerElementJs extends aggregation(Polymer.Element,TestPolymerElement) {
}
customElements.define(TestPolymerElementJs.is, TestPolymerElementJs);

此外，您可以定义属性并在 ScalaJS 中管理它们，例如：

@ScalaJSDefined
@JSExportTopLevel("TestPolymerElement")
class TestPolymerElement(val name : String) extends js.Object {

    def test = g.console.log(s"Hello from ${name}")

}

object TestPolymerElement {
    @JSExportStatic
    def is = "test-polymer-element"

    @JSExportStatic
    def properties = js.Dictionary (
        "name" -> js.Dictionary(
            "type" -> "String"
        )
    )
}
于 2017-07-15T16:39:15.563 回答