Working with arrays

Working with arrays

Working with arrays of data in maquette can simply be accomplished by using the javascript map function, 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.

The createMapping function serves the same purpose as the Javascript map function, but with the ability to call 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.