Temp.elm

-- Файл ElmComponent.elm
module ElmComponent exposing (..)

import Html exposing (..)
import Html.Events exposing (onClick)

-- Простой компонент (кнопка со счётчиком)

type alias Model = { text : String , counter : Int }
type Msg = Inc

-- Стандартная архитектура Model-View-Update, только для данного компонента

initialModel : Model
initialModel = { text = "Initial text", counter = 0 }

view : Model -> Html Msg
view model =
    div [ ]
        [ h1 [] [ text "My little Elm component:" ]
        , button [ onClick Inc ] [ text "Increment" ]
        , br [] []
        , text model.text
        ]

update : Msg -> Model -> Model
update Inc model = { text = "Counter: " ++ toString (model.counter + 1) , counter = model.counter + 1 }


-- Файл ElmProgram.elm
module ElmProgram exposing (..)

import Html exposing (..)
import ElmComponent

-- Страница с двумя компопентами ElmComponent
type alias Model =
    ( ElmComponent.Model, ElmComponent.Model )
type Msg =
    Msg1 ElmComponent.Msg | Msg2 ElmComponent.Msg

-- Model-View-Update верхнего уровня (просто делегирует функции своим дочерним компонентам)
initialModel : Model
initialModel = ( ElmComponent.initialModel, ElmComponent.initialModel )

view : Model -> Html Msg
view (model1, model2) =
    div []
        [ ElmComponent.view model1 |> Html.map Msg1
        , ElmComponent.view model2 |> Html.map Msg2
        ]

update : Msg -> Model -> Model
update msg ( model1, model2) =
    case msg of
        Msg1 msg1 -> ( ElmComponent.update msg1 model1, model2 )
        Msg2 msg2 -> ( model1 , ElmComponent.update msg2 model2 )

main : Program Never Model Msg
main = Html.beginnerProgram
    { model = initialModel
    , view = view
    , update = update
    }