# Summary
In this chapter, we have looked at models, views, and delegates. For each data entry in a model, a view instantiates a delegate visualizing the data. This separates the data from the presentation.
A model can be a single integer, where the index
variable is provided to the delegate. If a JavaScript array is used as a model, the modelData
variable represents the data of the current index of the array, while index
holds the index. For more complex cases, where multiple values need to be provided by each data item, a ListModel
populated with ListElement
items is a better solution.
For static models, a Repeater
can be used as the view. It is easy to combine it with a positioner such as Row
, Column
, Grid
or Flow
to build user interface parts. For dynamic or large data models, a view such as ListView
, GridView
, or TableView
is more appropriate. These create delegate instances on the fly as they are needed, reducing the number of elements live in the scene at once.
The difference between GridView
and TableView
is that the table view expects a table type model with multiple columns of data while the grid view shows a list type model in a grid.
The delegates used in the views can be static items with properties bound to data from the model, or they can be dynamic, with states depending on if they are in focus or not. Using the onAdd
and onRemove
signals of the view, they can even be animated as they appear and disappear.