This page covers Tutorial v2. Elm 0.18.

Navigation

Next let's add buttons to navigate between views.

Routing

In src/Routing.elm add two new functions:

playersPath : String
playersPath =
    "#players"


playerPath : PlayerId -> String
playerPath id =
    "#players/" ++ id

Players List

The players' list needs to show a button for each player to trigger the ShowPlayer message.

In src/Players/List.elm. First import href and Routing :

import Html.Attributes exposing (class, href)
...
import Routing exposing (playerPath)

Add a new function for this button at the end:

editBtn : Player -> Html.Html Msg
editBtn player =
    let
        path =
            playerPath player.id
    in
        a
            [ class "btn regular"
            , href path
            ]
            [ i [ class "fa fa-pencil mr1" ] [], text "Edit" ]

This button is a common a tag, which will change the browser url directly. As we are using hash routing we can just change the location hash and routing will work.

And change playerRow to include this button:

playerRow : Player -> Html Msg
playerRow player =
    tr []
        [ td [] [ text (toString player.id) ]
        , td [] [ text player.name ]
        , td [] [ text (toString player.level) ]
        , td []
            [ editBtn player ]
        ]

Player Edit

Let's add the navigation button to the edit view. In /src/Players/Edit.elm:

Add the imports:

import Html.Attributes exposing (class, value, href)
import Routing exposing (playersPath)

Add a new function at the end for the list button:

listBtn : Html Msg
listBtn =
    a
        [ class "btn regular"
        , href playersPath
        ]
        [ i [ class "fa fa-chevron-left mr1" ] [], text "List" ]

And add this button to the list, change the nav function to:

nav : Player -> Html Msg
nav model =
    div [ class "clearfix mb2 white bg-black p1" ]
        [ listBtn ]