Elm Portal Example

This page demonstrates how to achieve the same result as in the Elm Multiview example using Elm Portal.

Portal Example

In the elm-portal example the Example.Model, Example.Card and Example.Details are unchanged from the Elm Multiview example.

On the Elm side the only difference is the top-level PortalExample.view defined as follows:

view : Model -> Html Msg
view model =
    Html.div []
        [ elmPortal "#elm-example-card" (Example.Card.view model)
        , elmPortal "#elm-example-details" (Example.Details.view model)
        ]


elmPortal : String -> Html Msg -> Html Msg
elmPortal dataTargetSelector content =
    Html.node "elm-portal"
        [ Attr.attribute "data-target-selector" dataTargetSelector
        ]
        [ content ]

If you examine the page you will observe Elm renders two custom elements
which update nodes specified by data-target-selector.

    ...
    <div>
    <elm-portal data-target-selector="#elm-example-card"></elm-portal>
    <elm-portal data-target-selector="#elm-example-details"></elm-portal>
    </div>
    ...

Card view

The Example.Card.view renders the model as a card view.
If no thumbnail is present it generates an icon using the title with a custom element based on the DiceBear ↗︎ library.

Details view

The Example.Details.view renders the model as a form.
Both views share the same model so Elm re-renders both the Card view and Details view when the form is updated.

Portal Example Sources