Get updates via , Github, or RSS | About

Episode 47: SelectList Sep 28, 2017

Modeling impossible state is an anti-pattern in Elm, so instead we need to come up with new approaches to model our application. If we want to model a list of items such that one is always selected, we can use the zipper data structure. It enforces that one item is always selected, and is the perfect complement to many UI patterns. In this episode, we use Richard Feldman’s selectlist to clean up problematic code.

Examples

Main.elm

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        SelectTab id ->
            ( { model | tabs = SelectList.select (\u -> u.id == id) model.tabs }, Cmd.none )

View.elm

view : Model -> Html Msg
view model =
    let
        befores =
            model.tabs
                |> SelectList.before
                |> List.map (tabView False)