Virtual dom bug test case.

Demo.elm

module Main exposing (..)

import Html exposing (..)
import Html.App exposing (beginnerProgram)
import Html.Events exposing (onClick, on, targetChecked)


type View
    = Ascending
    | Descending


type Msg
    = SetView View
    | Say String


type alias Row =
    { name : String
    , message : Maybe String
    }


type alias Model =
    { data : List Row
    , view : View
    , lastMessage : Maybe String
    }


model : Model
model =
    { data =
        [ { name = "Alice"
          , message = Just "Yes!"
          }
        , { name = "Bob"
          , message = Just "No!"
          }
        , { name = "Carl"
          , message = Nothing
          }
        ]
    , view = Ascending
    , lastMessage = Nothing
    }


update : Msg -> Model -> Model
update msg model =
    case msg of
        SetView v ->
            { model | view = v }

        Say message ->
            { model | lastMessage = (Just message) }


view : Model -> Html Msg
view model =
    let
        makeRow r =
            case r.message of
                Nothing ->
                    button [] [ text r.name ]

                Just message ->
                    button [ onClick (Say message) ]
                        [ text (r.name ++ " says, '" ++ message ++ "'") ]

        content =
            div []
                (model.data
                    |> (if model.view == Ascending then
                            identity
                        else
                            List.reverse
                       )
                    |> List.map makeRow
                )

        makeButton v =
            button [ onClick (SetView v) ]
                [ text (toString v) ]

        buttons =
            List.map makeButton [ Ascending, Descending ]
    in
        div []
            [ div []
                [ content ]
            , h1 []
                [ text (Maybe.withDefault "" model.lastMessage) ]
            , div []
                buttons
            ]


main : Program Never
main =
    beginnerProgram { model = model, view = view, update = update }