core.html

<!-- arguments:
  * id: optional, id of the container element; if missing, an id is generated
  * class: additional CSS classes (like form-control)
  * disabled
  * multiple: allow multiple selections
  * uniq: if false, one option can be selected several times
  * lang: language

  * data: a model path with the possible selections
  * value: a model path with the current selection

model paths:
  * options
  * focus, open

  * data
  * results

  * selections
  * value
 -->
<index: tag='select2'>
    <!-- core container -->
    {{with @id ? @id : id as #id}}
        <span as="container" id="select2-{{#id}}"
                class="select2 select2-container select2-container--{{options.theme}} select2-container--below
                        {{if focus}} select2-container--focus{{/}}
                        {{if open}} select2-container--open{{/}}
                        {{if options.disabled}} select2-container--disabled{{/}}"
                dir="{{options.dir}}">

            <!-- what has already been selected, the current selection -->
            <span class="selection">
                <view is="{{options.selectionAdapter}}" as="selection" id="select2-{{#id}}-selection" class="{{@class ? @class : ''}}" />
            </span>

            <!-- what is possible to be selected -->
            {{if open}}
                <span as="dropdown" class="select2-dropdown select2-dropdown--below" dir="{{options.dir}}">
                    <view is="{{options.resultsAdapter}}" as="results" id="select2-{{#id}}-results" />
                </span>
            {{/}}

        </span>
    {{/}}