View Route Module

If we open our browser to a server-rendered elm-pages Route http://blog.dreyeck.ch/view/welcome-visitors, it will render from our Route module app/Route/View/Slug_/SPLAT__.elm.

Our View Route Module maps to a route called Lineup.

How to render the RouteParams in our view? code , commit , commit , getSplat code

view function:

view : RouteBuilder.App Data ActionData RouteParams -> Shared.Model -> Model -> View.View (PagesMsg.PagesMsg Msg) view app shared model = { title = "View.Slug_.SPLAT__" , body = [ Html.h2 [] [ Html.text "New Page" ] ] }

We focus on RouteParams.

type alias RouteParams = { slug : String, splat : List String }

The splat data in RouteParams for an optional splat are List String rather than (String, List String) to represent the fact that optional splat routes could match 0 segments.

See Optional Splat Routes. ⇐ Splat Routes convention

Type Signature:

view : RouteBuilder.App Data ActionData RouteParams -> Shared.Model -> Model -> View.View (PagesMsg.PagesMsg Msg)

This is the type signature of the view function. In Elm, type signatures provide information about the types of the function's arguments and its return value. Let's dissect it step by step: view is the name of the function. The type signature starts with view :, indicating that this is a function definition. Now, let's look at the function's parameters and return type: RouteBuilder.App Data ActionData RouteParams is the first argument. This suggests that the view function expects a value of this type as its first argument. It appears to be some sort of routing information, likely related to your application's routing setup.

Shared.Model is the second argument. It expects a value of type Shared.Model. This could be a shared model used in your application.

Model is the third argument. It expects a value of type Model. This is probably a model specific to the part of your application that this view function is responsible for.

The return type of the function is View.View (PagesMsg.PagesMsg Msg). This suggests that the function will return a value of type View.View, which is likely a representation of the view that your Elm application will render. Inside this view, there seems to be a message type PagesMsg.PagesMsg Msg associated with it.

Function Body:

The function body follows the type signature and is enclosed within the curly braces { ... }. In this case, the function body is quite simple:

{ title = "View.Slug_.SPLAT__" , body = [ Html.h2 [] [ Html.text "New Page" ] ] }

It creates a record with two fields: title is set to the string "View.Slug_.SPLAT__". This is likely the title of the page being displayed.

body is a list that contains an HTML h2 element with the text "New Page" inside it. This suggests that the body of the page contains an h2 heading with that text.

Overall, this view function seems to define the view for a specific page in your Elm application. It takes routing information, shared data, and a specific model as input and returns a representation of the page's view, including its title and body content.

~

Let's look at the lifecycle of a request in an elm-pages app. page

DOT FROM lambda-browsing