Creating reusable, reactive, selectable lists

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

  • tags in to the “selectableList” template.

    How should I implement the other parts like, storing which item is selected, clearing the selection if item no more present … ?