motorscript.com

This is a custom binding for using Selectize.js with your Knockout.js powered application.

Selectize is an HTML select alternative (like Select2, Chosen). Knockout is an MVVM framework for Javascript.

This custom binding wraps the built-in options binding of Knockout.js. So, additional parameters like optionsValue, optionsText, optionsCaption, etc. can be used with this binding. See official documentation for further details. By default, the selectize binding uses id for optionsValue and name for optionsText.

By default, the text Choose… is used as optionsCaption. You can use optionsCaption: null for no captions (first item is selected by default).

The custom binding is available from https://gist.githubusercontent.com/xtranophilist/8001624/raw/ko_selectize.js

Example files are also available from https://gist.github.com/xtranophilist/8001624

Warning: This binding wraps the built-in options binding of Knockout.js and doesn’t provide the whole object to Selectize and therefore options like searchField do not work out of the box.

Examples of selectize knockout binding

1. Using selectize with plain select tag, with values built in view.

<select data-bind="selectize: {}"> <option value="1">Val 1</option> <option value="2">Val 2</option> </select>

2. Using values from observable array.

The dropdown is created with all objects from items observable array. The value of id or attribute set in optionsValue binding is set to item_id.

<select data-bind="selectize: items, value: item_id"></select>

Debug

items =
item_id =

3. Getting selected item as an object

The selectize binding provides optional object parameter. While the observable provided with value parameter (like item_id in our example) holds the id (or whatever property optionsValue defines), the observable provided with object parameter holds the whole item itself.

<select data-bind="selectize: items, value: my_item_id, object: my_item"></select>

Debug

items =
my_item_id =
my_item =

4. Using with multiselect

<select data-bind="selectize: items, value: selected_items" multiple></select>

Debug

items =
selected_items =

5. Passing additional options

See official Selectize.js usage documentation for all available options.

<select data-bind="selectize: items, value: selected_items2, options: {plugins: ['remove_button']}" multiple></select>

Debug

items =
selected_items2 =