9.list-selection.md

List selection

The purpose of this document is to help you dealing with list selection.
Here is the scenario. You have a list represented with a UL as the container and LI as list items.
When you click on a list item you want to fetch the data record for that item and show it in the detail section that can just be a div.

The process we want to follow is:

1. Click on the ul and get the target item.
2. Get the data id on the list item
3. Get the data object from the object store
4. Set the selected property to the data item we fetched

We will assume the following.

1. The collection is stored in the object store using setProperty.
2. The list items are build using the binding engine <template for="item of items">
3. When we select an item we want to set the property called data to that object.

If this is true, each list item will have a data-uid attribute that is the data id of the item in the object store. We can use the setValue binding syntax to achieve the above example.

<ul click.setValue="data = $data($event.target.dataset.uid)">
    ...
</ul>

Let's examine what the following statement means

$data($event.target.dataset.uid)

1. $data is a shorthand for crsbinding.data.getValue.
2. We pass in the data id stored in the data-uid attribute of the list item, this will get us the object.
3. We then set the data property to that value.