I would like to create multiple lists in my project containing options which can be selected by the user. I know there are multiple similar projects focusing on providing drop-down/select replacements. I need to have plain - scrollable lists instead.
Since the lists will contain whole hierarchical structure I would like to have some easy-accessible functionality like:
- getting of the selected element
- clearing the selection
- clearing the selection automatically if the selected option dissapears from the list
- automatic setting of the item-unselected/item-selected class
- keeping the selected element on the same position in the scroll-area when list elements were added
Using reactive-var or reactive.dict for managing the content seem to be a good idea to me.
I got some inspiration from here but I still can not wrap my head around how to start properly.
I can set the content from other template with the Ui.contentBlock like this
<template name="selectableList">
<div role="list" class="list">
<ul>
{{#if UI.contentBlock}}
{{ > UI.contentBlock}}
{{/if}}
</ul>
</div>
</template>
{{#selectableList}}
{{#each items}}
<li>
{{this.text}}
</li>
{{/each}}
{{/selectableList}}
which works. I wonder if it is possible to include the
How should I implement the other parts like, storing which item is selected, clearing the selection if item no more present … ?