Child 2 Child Communication.

Child.elm

module Child exposing (..)

import Html exposing (..)
import Html.Attributes exposing (value)
import Html.Events exposing (on, onClick, targetValue)
import Json.Decode as Json


-- MODEL


type alias Model =
    String


init txt =
    txt



-- UPDATE


type Msg
    = ChangeText String
    | SendUpstream


type UpstreamMsg
    = UpdateOthers String
    | NoEffect


update msg model =
    case msg of
        ChangeText txt ->
            ( txt, NoEffect )

        SendUpstream ->
            ( model, UpdateOthers model )



-- VIEW


view model =
    div []
        [ text model
        , input [ value model, on "input" (Json.map ChangeText targetValue) ] []
        , button [ onClick SendUpstream ] [ text "SendUpstream" ]
        ]



-- SUBSCRIPTIONS


subscriptions model =
    Sub.none

elm-package.json

{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "4.0.1 <= v < 5.0.0",
        "elm-lang/html": "1.0.0 <= v < 2.0.0"
    },
    "elm-version": "0.17.0 <= v < 0.18.0"
}

Main.elm

module Main exposing (..)

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


main =
    App.program
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        }



-- MODEL


type alias Model =
    { top : Child.Model
    , bottom : Child.Model
    }


init =
    ( { top = Child.init "Top"
      , bottom = Child.init "Bottom"
      }
    , Cmd.none
    )



-- UPDATE


type Msg
    = Top Child.Msg
    | Bottom Child.Msg
    | Update String


update msg model =
    case msg of
        Top cMsg ->
            let
                ( newTop, upstream ) =
                    Child.update cMsg model.top

                newModel =
                    { model | top = newTop }
            in
                case upstream of
                    Child.NoEffect ->
                        ( newModel, Cmd.none )

                    Child.UpdateOthers txt ->
                        ( newModel, updateCmd txt )

        Bottom cMsg ->
            let
                ( newBottom, upstream ) =
                    Child.update cMsg model.bottom

                newModel =
                    { model | bottom = newBottom }
            in
                case upstream of
                    Child.NoEffect ->
                        ( newModel, Cmd.none )

                    Child.UpdateOthers txt ->
                        ( newModel, updateCmd txt )

        Update txt ->
            let
                newModel =
                    Model txt txt
            in
                ( newModel, Cmd.none )


updateCmd txt =
    -- Imagine that this is a HTTP request or something more complex
    Task.perform Update Update (Task.succeed txt)



-- VIEW


view model =
    div []
        [ App.map Top <| Child.view model.top
        , App.map Bottom <| Child.view model.bottom
        ]



-- SUBSCRIPTIONS


subscriptions model =
    Sub.none