使用列表的Elm多计数器代码

module Main exposing (..)

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


-- Model

type alias Model =
    { counters : List Int
    }


init : Model
init =
    { counters = [ 0, 0, 0 ] }


-- Msg

type Msg
    = Increment Int
    | Decrement Int


-- Update

update : Msg -> Model -> Model
update msg model =
    case msg of
        Increment index ->
            { model | counters = incrementCounter index model.counters }

        Decrement index ->
            { model | counters = decrementCounter index model.counters }


incrementCounter : Int -> List Int -> List Int
incrementCounter index counters =
    let
        ( before, after ) =
            List.splitAt index counters

        updatedCounter =
            (List.head after |> Maybe.withDefault 0) + 1

        newCounters =
            before ++ (updatedCounter :: List.tail after)
    in
    newCounters


decrementCounter : Int -> List Int -> List Int
decrementCounter index counters =
    let
        ( before, after ) =
            List.splitAt index counters

        updatedCounter =
            (List.head after |> Maybe.withDefault 0) - 1

        newCounters =
            before ++ (updatedCounter :: List.tail after)
    in
    newCounters


-- View

view : Model -> Html Msg
view model =
    div []
        (List.indexedMap viewCounter model.counters)


viewCounter : Int -> Int -> Html Msg
viewCounter index counter =
    div []
        [ button [ onClick (Increment index) ] [ text "+" ]
        , div [] [ text (String.fromInt counter) ]
        , button [ onClick (Decrement index) ] [ text "-" ]
        ]


-- Main

main =
    Browser.sandbox { init = init, update = update, view = view }