Flat Elm UI Component Architecture Experiment

flatCounterPair.elm

import Html exposing (Html, button, div, text)
import Html.App as Html
import Html.Events exposing (onClick)



main =
  Html.beginnerProgram
    { model = model
    , view = view
    , update = update
    }


-- MODEL

type alias Model =
  { buttonOne : ButtonModel
  , buttonTwo : ButtonModel
  }

model : Model
model = 
  { buttonOne = buttonModel
  , buttonTwo = buttonModel
  }


-- The button component

type alias ButtonModel = Int

buttonModel : ButtonModel
buttonModel =
  0

type Msg
  = Increment
  | Decrement


buttonUpdate : Msg -> ButtonModel -> ButtonModel
buttonUpdate msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1


buttonView : ButtonModel -> Html Msg
buttonView model =
  div []
  [ button [ onClick Decrement ] [ text "-" ]
  , div [] [ text (toString model) ]
  , button [ onClick Increment ] [ text "+" ]
  ]


-- UPDATE


update : Msg -> Model -> Model
update msg model =
  --{ model | buttons = List.map buttonUpdate (msg model.buttons) }
  { model
      | buttonOne = buttonUpdate msg model.buttonOne
      , buttonTwo = buttonUpdate msg model.buttonTwo
  }


-- VIEW


view : Model -> Html Msg
view model =
   div [] 
   [ buttonView model.buttonOne
   , buttonView model.buttonTwo
   ]

Working version

module Main exposing (..)

import Html exposing (Html, button, div, text)
import Html.App as Html
import Html.Events exposing (onClick)


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



-- MODEL


type alias Model =
    { buttonOne : ButtonModel
    , buttonTwo : ButtonModel
    }


model : Model
model =
    { buttonOne = buttonModel
    , buttonTwo = buttonModel
    }



-- The button component


type alias ButtonModel =
    Int


buttonModel : ButtonModel
buttonModel =
    0


type ButtonMsg
    = Increment
    | Decrement


buttonUpdate : ButtonMsg -> ButtonModel -> ButtonModel
buttonUpdate msg model =
    case msg of
        Increment ->
            model + 1

        Decrement ->
            model - 1


buttonView : ButtonModel -> Html ButtonMsg
buttonView model =
    div []
        [ button [ onClick Decrement ] [ text "-" ]
        , div [] [ text (toString model) ]
        , button [ onClick Increment ] [ text "+" ]
        ]



-- UPDATE


type Msg
    = One ButtonMsg
    | Two ButtonMsg


update : Msg -> Model -> Model
update msg model =
    case msg of
        One bMsg ->
            { model | buttonOne = buttonUpdate bMsg model.buttonOne }

        Two bMsg ->
            { model | buttonTwo = buttonUpdate bMsg model.buttonTwo }



-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ Html.map One (buttonView model.buttonOne)
        , Html.map Two (buttonView model.buttonTwo)
        ]