Knockout Choose

A lightweight and powerful select alternative to let users choose items from many options as a modern Knockout component

Examples

Single select of strings

<choose params="options: fruits, selected: selected"></choose>
<script>
  ko.applyBindings({
    fruits: ['banana', 'apple', 'strawberry', 'pineapple'],
    selected: ko.observable()
  })
</script>

Single select of objects

(try tabbing and using the keyboard too! thanks to aria-listbox)

<choose params="options: people, selected: selected">
  <choose-match><span data-bind="text: $data ? name + ' is ' + age : 'Select a person'"></span></choose-match>
  <choose-item><!-- ko text: name --><!-- /ko --></choose-item>
</choose>

<script>
  ko.applyBindings({
    people: [{
      name: 'Bob',
      age: 31
    }, {
      name: 'Jane',
      age: 25
    }, {
      name: 'Anne',
      age: 42
    }],
    selected: ko.observable()
  })
</script>

Multiple select of objects

<choose params="options: people, selected: selected, multiple: true">
  <choose-match><span data-bind="text: $root.selectionText($data)"></span></choose-match>
  <choose-item><span data-bind="text: $data.name"></span> is <span data-bind="text: $data.age"></span></choose-item>
</choose>

<script>
  ko.applyBindings({
    people: [{
      name: 'Bob',
      age: 31
    }, {
      name: 'Jane',
      age: 25
    }, {
      name: 'Anne',
      age: 42
    }],
    selected: ko.observableArray(),

    selectionText: function(data) {
      return data.length ?
        data.length + ' people selected: ' + data.map(p => p.name).join(', ') :
        'Nobody selected'
    }
  })
</script>
      

Style as a radio, tabs, or whatever via only CSS

knockout-choose uses clean, semantic styling, so anywhere you need the user to choose one or many options from a fix set of options, it can be used. No more separate code paths for a radio, dropdown, or even tabs - it's all the same! Those are styling concerns.

Installation

npm

npm install --save knockout-choose

bower

bower install --save knockout-choose

Source on GitHub