Можно ли добавить элементы пользовательского интерфейса Javascript в приложение на 100% вяз?

Question

У меня есть приложение вяза, которое работает нормально.Он имеет панель навигации, которую мы построили с использованием стандартного функционального кода elm UI.Кто-то видит мое приложение и говорит, что вы должны использовать наш стандартный компонент пользовательского интерфейса панели инструментов javascript.Можно ли встроить компонент пользовательского интерфейса Javascript в 100% собственное приложение ELM?

Обратите внимание, что мы уже используем порты для вызова некоторых собственных функций JavaScript.Мне интересно, можно ли использовать ту же концепцию для встраивания компонентов пользовательского интерфейса, но поскольку ELM имеет собственный внутренний рендеринг, это будет проблематично?

Answer 1

Это то, что вам нужно знать:

1. Elm позволяет вам визуализировать "пользовательский" узел HTML через Html.node
2. Большинство браузеров (иБолее того, с помощью полифилла вы можете создать пользовательский элемент , который использует JS для визуализации.

Итак, ваш код Elm говорит, что я хочу<my-custom-thing customProp="whatever"/>. Elm отвечает за помещение этого узла в dom и его удаление.

Ваш пользовательский элемент и JS выполняют рендеринг того, что происходит внутри этого узла.

Ваш пользовательский элемент может отправлять события обратно в Elm (например, зависания, щелчки, пользовательские элементы).

Порты предназначены для обработки. У вас есть данные, которые вы хотите отправить между Elm / JS. Если вы отправляете данные черезпорт на JS, а JS изменяет DOM, у вас, скорее всего, возникнут проблемы.

Answer 2

Мне не ясно, что вы подразумеваете под "компонентами пользовательского интерфейса Javascript", поскольку это может относиться ко многим различным вещам, таким как реагирующие компоненты или угловые компоненты.Но 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)