Select2 w/ knockout

by Doug Hill

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/bootstrap/css/bootstrap.css">
<script src="http://ivaynberg.github.com/select2/select2-3.2/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-3.2/select2.css">
<div>
    <select multiple="true" data-bind="options: values, selectedOptions: selected, select2: { placeholder: 'pick some colors' }"></select>
</div>

<hr/>

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

JavaScript

ko.bindingHandlers.select2 = {
    init: function(element, valueAccessor) {
      var options = ko.toJS(valueAccessor()) || {};
      setTimeout(function() { 
          $(element).select2(options);
      }, 0);
    }
};    

ko.applyBindings({
    values: ["red", "grey", "blue"],
    selected: ko.observableArray([])    
});