Insertion of an existent element during the build

[maurocchi]

trafficstars

Given an existent element, there is a way to insert it as a child of an another element during the DOM build process so it can be referred in follow?

I would get something like the following:

val view = document.create.div {} // <-- a sort of placeholder
val layout = document.create.div {
    layout(
        left = {
            menu {
                menuItem("A") {
                    onClickFunction = { view.replaceChildrenWith(document.create.span { +"Selected A" }) }
                }
                menuItem("B") {
                    onClickFunction = { view.replaceChildrenWith(document.create.span { +"Selected B" }) }
                }
            }
        },
        center = { +view } // <-- currently it's not supported
    )
}

[maurocchi]

Nobody has something to say about it? Perhaps my question is unclear?

[orangy]

Sorry for delays, currently most team members are on holidays. What you need is not the pre-created view instance, but rather make a builder function. See example in ktor.io: https://github.com/ktorio/ktor/blob/master/ktor-samples/ktor-samples-html/src/io/ktor/samples/html/HtmlApplication.kt#L30

[orangy]

Also check more advanced strongly-typed templating system in Kotlin (part of ktor.io as well): https://github.com/ktorio/ktor/blob/master/ktor-features/ktor-html-builder/test/io/ktor/tests/html/HtmlTemplateTest.kt#L12

[cy6erGn0m]

Also see https://github.com/Kotlin/kotlinx.html/wiki/Micro-templating-and-DSL-customizing

[rnikander]

(A couple of those links are dead.) I want this feature too. I have some UI objects that create their DOM nodes, then I want to combine them in various ways. It's not always possible or convenient to create extension functions to add to the DSL. Seems like it should be easy to map +node to underlyingNode.appendNode(node) I just don't know how to get at "underlyingNode".