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

Question

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

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

Answer 1

我不清楚您所说的“Javascript UI 组件”是什么意思，因为它可以指代许多不同的东西，例如 react 组件或 Angular 组件。但 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)