Selectize Knockout Bindings
HTML
<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<script src="http://brianreavis.github.io/selectize.js/js/selectize.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://brianreavis.github.io/selectize.js/css/selectize.bootstrap2.css">
<select id="select-people" data-bind="selectize: peopleList, selectizeValue: currentPerson, labelField: 'text', valueField: 'value'"></select>
<ul>
<li data-bind="text: currentPerson().text"></li>
</ul>
JavaScript
ko.bindingHandlers.selectize = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var allBindings = allBindingsAccessor();
$(element).selectize({
options: ko.unwrap(valueAccessor()),
dataAttr: 'data-test',
labelField: allBindings.labelField,
valueField: allBindings.valueField,
onInitialize: function() {
this.setValue(ko.unwrap(allBindings.selectizeValue)[allBindings.valueField]);
},
onChange: function(newValue) {
allBindings.selectizeValue(this.options[newValue]);
}
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).selectize('destroy');
});
},
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var $selectize = $(element).data('selectize');
// addOption detects whether the parameter is a single value or an array
$selectize.addOption(ko.unwrap(valueAccessor()));
$selectize.refreshOptions(false);
}
};
var ViewModel = function() {
var self = this;
self.peopleList = ko.observableArray();
self.currentPerson = ko.observable();
};
var viewModel = new ViewModel();
viewModel.peopleList([
{
'value': 1,
'text': 'Tom'
},
{
'value': 2,
'text': 'Andy'
},
{
'value': 3,
'text': 'Mike'
},
{
'value': 4,
'text': 'Cory'
},
{
'value': 5,
'text': 'Aaron'
},
{
'value': 6,
'text': 'Haitham'
},
{
'value': 7,
'text': 'Basel'
},
{
'value': 8,
'text': 'Sakina'
},
{
'value': 9,
'text': 'Jeff'
},
{
'value': 10,
'text': 'Ken'
}
]);
viewModel.currentPerson(viewModel.peopleList()[3]);
$(function() {
...