Child.elm

module Child exposing (init, update, subscriptions, view, Model, Msg(Dispatch), DispatchMsg(..))

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)

type alias Model =
  { username : String
  }


{-| Local messages to the component
-}
type Msg
  = ChangeUsername String
  | Login
  | Dispatch DispatchMsg -- this tags messages destined for the parent
  | Noop


{-| Messages for the parent (the exposed api)
-}
type DispatchMsg
  = LoggedIn String
  | Cancel


init : (Model, Cmd Msg)
init =
  (Model "", Cmd.none)


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    ChangeUsername str ->
      ( { model | username = str }
      , Cmd.none
      )

    Login ->
      ( { model | username = "" }
      , Task.perform (always Noop) (Dispatch << LoggedIn) <| Task.succeed model.username
      )

    Dispatch _ ->
      ( model
      , Cmd.none
      )
    
    Noop ->
      ( model
      , Cmd.none
      )


subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.none


view : Model -> Html Msg
view model =
  div
    []
    [ input
        [ placeholder "Name"
        , onInput ChangeUsername
        , value model.username
        ]
        []
    , button
        [ onClick Login
        ]
        [ text "Login" ]
    , button
        [ onClick <| Dispatch Cancel
        ]
        [ text "Cancel" ]
    ]

Parent.elm

module Parent exposing (..)

import Html exposing (..)
import Html.App
import Child

type alias Model =
  { childModel : Child.Model
  }


type Msg
  = ChildMsg Child.Msg


init : (Model, Cmd Msg)
init =
  (Model <| fst Child.init, Cmd.none)


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    ChildMsg (Child.Dispatch (Child.LoggedIn str)) ->
      let _ = Debug.log "parent" <| "Got LoggedIn " ++ str in
      (model, Cmd.none)

    ChildMsg (Child.Dispatch Child.Cancel) ->
      let _ = Debug.log "parent" <| "Got Cancel" in
      (model, Cmd.none)

    ChildMsg msg ->
      let
        (childModel, childCmd) = Child.update msg model.childModel
      in
      ({ model | childModel = childModel }, childCmd |> Cmd.map ChildMsg)


subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.none


view : Model -> Html Msg
view model =
  Child.view model.childModel |> Html.App.map ChildMsg