Экспериментальное повторное использование кода в Elm, часть III — Counters Bonanza

Эксперименты с переработкой кода Elm, превращая его в модуль

Это третья часть серии:

Часть I

Часть II

Вы можете найти код для этого поста на https://github.com/lucamug/elm-multiple-buttons-II

В предыдущей статье я взял счетчик в официальном примере «кнопки» и продублировал его на странице.

Затем я попытался обобщить модуль импортера и, в конце концов, написал модуль, который был достаточно общим, чтобы я мог импортировать его снова, чтобы создать список списка счетчиков, просто изменив несколько строк кода в начале модуля.

Подробности смотрите в предыдущей статье.

Представление в двух модулях, которые загружают счетчики и список счетчиков,

view model =
    div [ style [ ( "margin", "10px" ) ] ]
        [ button [ onClick (Add) ] [ text "Add" ]
        , div []
            (List.indexedMap
                (\index element ->
                    div
                        [ style
                            [ ( "border", "1px solid #aaa" )
                            , ( "background-color", "#eee" )
                            , ( "display", "inline-block" )
                            , ( "padding", "10px" )
                            , ( "margin", "10px" )
                            ]
                        ]
                        [ Html.map
                            (MsgFromChild index)
                            (div
                                []
                                [ Imported.view element ]
                            )
                        , button [ onClick (Remove index) ] 
                             [ text "Remove" ]
                        ]
                )
                model
            )
        , pre [] [ text ("model: " ++ (toString model)) ]
        ]

По сравнению с предыдущей версией я добавил сюда две кнопки

1. «Удалить», которые удаляют один элемент из списка
2. «Добавить», которые добавляют один элемент из списка

Итак, теперь можно добавлять и удалять элементы из списков.

Список сообщений теперь

type Msg
    = MsgFromChild Int Imported.Msg
    | Remove Int
    | Add

и обновленная функция

update msg model =
    case msg of
        MsgFromChild index msgFromChild ->
            let
                oldElement =
                    getElementFromList model index 
                         defaultElementIfNothing
                newElement =
                    Imported.update msgFromChild oldElement
            in
                setElementIntoList model index newElement
        Remove index ->
            removeElementFromList index model
        Add ->
            List.append model [ defaultElementIfNothing ]

Чтобы протестировать код, вам нужно

$ git clone https://github.com/lucamug/elm-multiple-buttons-II.git
$ cd elm-multiple-buttons/
$ elm-reactor

К трем модулям можно получить доступ независимо, и они сохраняют свои функциональные возможности. Вы также можете увидеть это в этих скомпилированных примерах codepen:

buttons.elm
buttonslist.elm
main.elm

Единственные различия между buttonslist.elm и main.elm заключаются в следующем:

Так что, думаю, эти два модуля можно было бы как-то объединить, ради СУХОГО.

Здесь вы можете найти версию с дополнительным уровнем и цветом:

Это уровни во втором примере:

level0.elm
level1.elm
level2.elm
buttons.elm