Working with arrays
mapping from the data to the virtual DOM nodes directly. This looks as follows:
It does get a little more complex if you create a component that may hold state for every item. The following example shows how to do this.
There is one more advanced usecase. What if you use components but the underlying data can also get updated?
This could be the case if you use real-time communication or periodic refreshes.
Maquette provides the
createMapping function to keep your list of components synchronized with the underlying data.
The algorithm that maquette uses to update the array of components may look somewhat similar to how maquette updates the real DOM in order to reflect the virtual DOM,
but there are subtle differences. For example, the components will be reordered, instead of being removed and recreated.
map function, but with the ability
map multiple times and reusing the previous results where possible. The code below demonstrates this behavior.
More information about
createMapping can be found in the API documentation.