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

Question

我有一个运行良好的 elm 应用程序。它有一个我们使用标准 elm UI 功能代码构建的导航栏。有人看到我的应用程序并说您应该使用我们的标准 javascript 工具栏 UI 组件。是否可以将 Javascript UI 组件嵌入到 100% 原生 ELM 应用程序中？

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

Answer 1

我不清楚你所说的 "Javascript UI components" 是什么意思，因为它可以指代许多不同的东西，例如反应组件或 angular 组件。但是 Elm 确实支持标准 Web Components through 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

这是你需要知道的：

Elm 让我们通过 Html.node
大多数浏览器（以及更多 a polyfill allow you can create a custom element 使用 JS 呈现自身的浏览器。

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

您的自定义元素和 JS 完成渲染该节点内发生的事情的工作。

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

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

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

Is it possible to add Javascript UI elements to a 100% elm application?

javascript

interop

elm