multi-select/src/demo.html

A multi-select component for CanJS

<!-- The template to be demonstrated/tested -->
<script type="text/stache" id="demo" can-autorender>
  <can-import from="multi-select" />
  <can-import from="bootstrap/dist/css/bootstrap.css!" />

  <div>
    <div class="col-sm-3">
      <p>
        Selected Items:
        {{#each selectedItems}}
          {{.}},
        {{/each}}
      </p>

      <multi-select selected-values="{selectedItems}">
        {{#each items}}
          <option value="{{value}}" {{#isSelected}}selected{{/isSelected}}>{{text}}</option>
        {{/each}}
      </multi-select>
    </div>

    <div class="col-sm-3">
      <p>
        Selected Things:
        {{#each selectedThings}}
          {{.}},
        {{/each}}
      </p>

      <multi-select selected-values="{selectedThings}"
          select-all="default"
          all-selected-value="-1">
        {{#each things}}
          <option value="{{value}}" {{#if isSelected}}selected{{/if}}>{{text}}</option>
        {{/each}}
      </multi-select>
    </div>

    <div class="col-sm-6">
      <p>
        Selected Things as &#123;id:value&#125;:
        {{#each selectedThings2}}
          &#123; {{id}}: {{name}} &#125;,
        {{/each}}
      </p>

      <multi-select list="{things2}"
                    value-prop="id"
                    text-prop="name"
                    selected-prop="isChecked"
                    selected-items="{selectedThings2}"
                    select-all></multi-select>

    </div>
  </div>

  <div style="padding-top:100px;">
    <div class="col-sm-3">
      <p>
        Selected Items:
        {{#each singleItemSelected}}
          {{.}},
        {{/each}}
      </p>
      <multi-select selected-values="{singleItemSelected}">
        {{#each singleItemList}}
          <option value="{{value}}" {{#isSelected}}selected{{/isSelected}}>{{text}}</option>
        {{/each}}
      </multi-select>
    </div>
  </div>
</script>

<!-- The data for the above template. -->
<script src='../node_modules/steal/steal.js'
        main="can/view/autorender/">

  import can from "can";
  import $ from "jquery";

  $("#demo").viewModel().attr({
    singleItemList: [{'value': 1, 'text':'awesome.pdf'}],
    singleItemSelected: [],
    items: [
      {'value': 1, 'text': 'First'},
      {'value': 2, 'text': 'Second', isSelected: true},
      {'value': 3, 'text': 'Third'},
      {'value': 4, 'text': 'Fourth'},
      {'value': 5, 'text': 'Fifth'}
    ],
    selectedItems: [],
    things: [
      {'value': 1, 'text': 'Thing 1'},
    ],
    things2: [
      {'id': 1, 'name': 'Thing 1', 'isChecked': true},
      {'id': 2, 'name': 'Thing 2', 'isChecked': false},
      {'id': 3, 'name': 'Thing 3', 'isChecked': true}
    ],
    selectedThings: [],
    selectedThings2: []
  });
</script>