时间戳

首页 > 解决方案 > Is it possible to add Javascript UI elements to a 100% elm application?

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

问题描述

I have an elm application that is working fine. It has a navigation bar that we built using standard elm UI functional code. Someone sees my app and says you should be using our standard javascript toolbar UI component. Is it possible to embed a Javascript UI component into a 100% native ELM app?

Note, we already are using ports to call some native JavaScript functions. I am wondering if the same concept can be used to embed UI components but since ELM has it's own internal rendering would this be problematic?

标签： javascriptinteropelm

解决方案

我不清楚您所说的“Javascript UI 组件”是什么意思，因为它可以指代许多不同的东西，例如反应组件或角度组件。但是 Elm 确实通过自定义元素支持标准的Web 组件。

这是 Elm 方面的一个不完整示例，它是从开始 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)

推荐阅读