Эксперименты с переработкой кода 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)) ] ]
По сравнению с предыдущей версией я добавил сюда две кнопки
- «Удалить», которые удаляют один элемент из списка
- «Добавить», которые добавляют один элемент из списка
Итак, теперь можно добавлять и удалять элементы из списков.
Список сообщений теперь
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
заключаются в следующем:
Так что, думаю, эти два модуля можно было бы как-то объединить, ради СУХОГО.
Здесь вы можете найти версию с дополнительным уровнем и цветом:
Это уровни во втором примере: