This page covers Tutorial v2. Elm 0.18.
Next let's add buttons to navigate between views.
In src/Routing.elm add two new functions:
playersPath : String playersPath = "#players" playerPath : PlayerId -> String playerPath id = "#players/" ++ id
The players' list needs to show a button for each player to trigger the
In src/Players/List.elm. First import
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.
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 ] ]
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 ]