javascript - 在 KotlinJS 中使用标准 HTML 元素安全输入

Question

我正在尝试动态创建一个图像，然后将其附加到 DOM。

import org.w3c.dom.HTMLImageElement

fun main(args: Array<String>) {

    // load footer banner image
    val img: HTMLImageElement = HTMLImageElement()
    with (img){
        src = "img/footer.png"
        classList.add("img-responsive")
    }

}

但是，它与我的构造函数 HTMLImageElement() 不同，因为 HTMLImageElement 是一个接口(interface)。

删除构造函数，Kotlin 提示必须初始化 img。

以类型安全的方式使用 HTMLImageElement 的正确方法是什么？

更新:我现在使用 Maven，它会生成应有的所有内容。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.blah</groupId>
    <artifactId>blah</artifactId>
    <packaging>jar</packaging>
    <version>1.0.0</version>
    <name>Blah</name>

    <properties>
        <kotlin.version>1.0.2</kotlin.version>
        <kotlin.html.version>0.5.8</kotlin.html.version>
    </properties>

    <repositories>
        <repository>
            <id>bintray-kotlinx</id>
            <name>bintray</name>
            <url>http://dl.bintray.com/kotlinx/kotlinx</url>
        </repository>
    </repositories>

    <dependencies>
        <dependency>
            <groupId>org.jetbrains.kotlinx</groupId>
            <artifactId>kotlinx.html.js</artifactId>
            <version>${kotlin.html.version}</version>
        </dependency>
    </dependencies>

</project>

编译 blah.js、blah.js.map、blah.js.meta、kotlin.js, kotlinx.html.js, kotlinx.html.meta.js, kotlinx.html.shared.js, kotlinx.html.shared.meta.js 和 stdlib.meta.js。

在我的 html 文件(位于我的根目录中)中，我包含以下内容:

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="target/classes/kotlin.js"></script>
<script type="text/javascript" src="target/classes/kotlinx.html.shared.js"></script>
<script type="text/javascript" src="target/classes/blah.js"></script>

我的 Main.kt 中有一个 println("hello world") ，它在浏览器控制台中打印“hello world”，可以正常执行。

现在我仍然想使用 Kotlin 动态附加该图像......

文档说我应该执行 document.create.div("panel") 来创建 div，但是 document.create... 自动完成 createAttribute、createComment 等，在任何地方都看不到 create() 方法。 (文档来自包“kotlin.browser”)。

我不太确定如何使用 kotlinx.html，因为我在 IntelliJ 中看到的内容与文档不匹配。

如何使用 KotlinJS 将动态创建的图像附加到现有 div ？

Answer 1

我只是用 kotlin2js 和 kotlinx.html 编写示例项目 IRus/kotlin-kotlinx.html 。看起来当前版本的 kotlinx.html (0.5.8) 与 Kotlin 1.0.2 不兼容，但与 kotlin 1.0.1-2 配合良好。