How To Tell Elm About External Dom Changes

I'm using elm 0.17.1 and trying to interop with select2 javascript library(version 4.0.3), here is my Main.elm : port module Main exposing (..) import Html exposing (Html,select,o

Solution 1:

To address this question I've made this example to demonstrate all the core ideas of integrating any third-party JavaScript technology in to your Elm app.

Here are the rules:

• Let Elm to own the state
• Do not mutate the DOM, produced by Elm's view
• You don't need $(document).ready(), if Elm app controls the initialization logic
• Use ports to initialize and control the third-party code

Points of interest in the example:

• index.js — port subscription setup in JavaScript and select2 bootstrap code

• App.elm — owns the configuration for select2 and subscribes to changes

The view provides a container for all the jQuery magic:

view : Model -> Html Msg
view model =
    div []
        [ text (toString model)
        , div [ id "select2-container" ] [] -- The container, where select2 will live
        ]

Any feedback is very welcome, I'm willing to improve this answer if you could tell me, what is missing.