In the last blog, we continued our project to display a single best opening credit with a simple model. In this blog, we will see how do we go about displaying a list of opening credits.
Let’s start with the model. In the previous example, what we had was just one record with title and URL. Now to show a collection, we need to create a list of records. Let’s see how we would define the list of records.
type alias Model = List
{ title: String
, url: String
}
All we did in this definition compared to the previous one was to add ‘List’ in the definition. Even though this definition is all and good, there will be times where you will need to pass just a single record between functions, like displaying one record. So we need to split the definition to represent a record and list of records. With that refactoring, the definition would look like this.
type alias Model = List
Record
type alias Record =
{ title: String
, url : String
}
Here we defined a single record definition as record and then created a Model, a list of records.
Next, we modify the initial data to hold more than one best opening credits. So I added True Detective season 2 opening credits.
initData : Model
initData =
[ { title = “Game of Thrones”
, url = https://www.youtube.com/embed/s7L2PVdrb_8
}
, { title = “True Detective Season 2”
, url = https://www.youtube.com/embed/GJJfe1k9CeE
}
]
There will be no change to update function as there are no user interactions yet.
The view is going to be interesting. So far, all the controls we have created are all just single controls that never displayed anything that is a collection. How do we go about doing this?
Let’s look at the view from the previous blog.
view : Model -> Html Msg
view model =
div []
[ h1 [] [ text initData.title ]
, iframe [ width 420, height 315, src initData.url ] []
]
The above view function takes Model and creates the view for Elm to render. Now that we modified the Model to List, we need to modify the definition to be Record instead of Model to display a single record.
view : Record-> Html Msg
view record=
div []
[ h1 [] [ text record.title ]
, iframe [ width 420, height 315, src record.url ] []
]
This can not be the view, because view needs to generate all the records to display, so let’s change the name of the view to a different name to represent what it does, displaying a single record.
displayLine : Record -> Html Msg
displayLine record =
div []
[ h1 [] [ text record.title ]
, iframe [ width 420, height 315, src record.url ] []
]
Now we need to modify the view to call this function for every record in the list, that is it. In Elm, there is no iteration or loop; instead, we will call the map function.
view : Model -> Html Msg
view model =
div []
(List.map displayLine model)
Let’s look at the view definition closer. View definition states that it takes Model (which is a list of records) and generates the HTML view for Elm to render. The view function definition has just one function call that is div. As stated in the previous blog, view function takes two arguments. The first set of arguments are the function attributes, and the second set of arguments is a list of children. In the above definition, the second parameter is (List.map displayLine model), what does it mean?
Let’s look at the definition from left to right. There are three words in the statement. ‘List.map,’ ‘displayLine,’ and ‘model.’ We know the last two, ‘displayLine,’ which takes a record and displays the record’s title and url. The last parameter is ‘model,’ which is a list of records. So it looks like we are calling List.map function, with two parameters.
List.map’s first argument is a function that takes a list as a parameter and produces a list as a result.
If you look at our call, listen to displayLine for every record in the model, and generate a one-line display for the given record. List.map function always returns a list. Like all HTML function calls, Div function expects the second argument to be a list of children, and List.map returns the list of displayLine.
If you run the application, you should see a result similar to the following.
You can find the latest code @ https://github.com/ksunair/bestopeningcredits
Unni's space 