Locally scoped data for *components
This new functionality allows you to create similar buttons with different click handlers on the same page. Let’s demonstrate how it works by looking at an example!
Suppose you have a collections of associations, each association contains the name and age of all your friends:
>> people = [{"name" -> "Peter", "age" -> 24}, {"name" -> "Josh", "age" -> 37}]
The size of this collection can change, as you have a module in your program to add or remove friends.
You can dynamically generate the components using the following code:
*for: person in people
*component
*header: {person["name"]}
On each iteration of the *for loop, we retrieve an element from the list of friends (the association of data about a person), save it into the variable person and generate a component that displays the value of the key “name” for that association.
Now let’s make these components clickable! Since the code under *click gets executed only when the user of your program clicks on a component in particular, we use the following syntax to be able to retrieve each person’s data:
*label: people
*for: person in people
*component
*header: {person["name"]}
*with: person
*click
Name: {it["name"]}
Age: {it["age"]}
*button: Back
*goto: people
We use the keyword *with to tell GuidedTrack what variable it needs to store for when the user clicks on the component being generated. We can use any type of variable: in this case, person is an association. Afterward we access that data in the code indented under *click by invoking it, as shown on the example.
Note that you cannot access the name of the person whose component you have clicked using Name: {person["name"]} because, as mentioned before, the code under *click gets executed when the user clicks on the component. This can only happen after all the components have been rendered, so person by then will contain the data of the last person in the collection of friends (since that is what person ends being assigned to in the last iteration of the loop).
|
