是否可以将Javascript UI元素添加到100％elm应用程序中？

Question

我有一个工作正常的榆树应用程序。它有一个我们使用标准elm UI功能代码构建的导航栏。有人看到我的应用程序，并说你应该使用我们的标准JavaScript工具栏UI组件。是否可以将Javascript UI组件嵌入到100％原生ELM应用程序中？

注意，我们已经使用ports调用一些本机JavaScript函数。我想知道是否可以使用相同的概念来嵌入UI组件，但由于ELM有自己的内部渲染，这会有问题吗？

Answer 1

我不清楚“Javascript UI组件”的含义是什么，因为它可以引用许多不同的东西，例如反应组件或角度组件。但是Elm确实通过Web Components支持标准的Custom Elements。

这是一个不完整的例子，说明它在Elm方面的样子，从Beginning Elm借来（并编辑了一下）：

googleMap : List (Attribute a) -> List (Html a) -> Html a
googleMap =
    Html.node "google-map"


onGoogleMapDrag : Attribute Msg
onGoogleMapDrag =
    coordinatesDecoder
        |> Json.Decode.map UpdateCenter
        |> on "google-map-drag"


view : Model -> Html Msg
view model =
    googleMap
        [ attribute "latitude" (toString model.center.latitude)
        , attribute "longitude" (toString model.center.longitude)
        , attribute "drag-events" "true"
        , attribute "zoom" "5"
        , onGoogleMapDrag
        ]
        (List.map viewMarker model.markers)

Answer 2

这是你需要知道的：

1. 榆树让你通过Html.node渲染一个“自定义”HTML节点
2. 大多数浏览器（以及a polyfill帮助下的更多浏览器允许您创建一个使用JS渲染自身的custom element。

所以，你的榆树代码说我想渲染一个<my-custom-thing customProp="whatever"/>。 Elm负责将该节点放入dom并将其删除。

您的自定义元素和JS执行渲染该节点内部的操作。

您的自定义元素可以将事件发送回Elm（例如，悬停，点击，自定义内容）。

端口更多用于处理。您有要在Elm / JS之间发送的数据。如果您通过端口向JS发送数据，并且JS改变了DOM，那么您可能会遇到问题。