jQuery chosen with Knockout.js binding

by lukaszlysik

HTML

<link rel="stylesheet" href="http://lysik.pl/public/chosen.css">
<script src="http://lysik.pl/public/chosen.jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<select class="chosen" multiple="true" style="width:300px;" data-bind="selectedOptions: selected, chosen: {}">
	<option>Choose...</option>
	<option>jQuery</option>
	<option selected="selected">MooTools</option>
	<option>Prototype</option>
	<option selected="selected">Dojo Toolkit</option>
</select>

JavaScript

ko.bindingHandlers.chosen = 
{
  init: function(element) 
  {             
    $(element).addClass('chzn-select');
    $(element).chosen();
  },
  update: function(element) 
  {
    $(element).trigger('liszt:updated');
  }
};

var myViewModel = {
    selected: ko.observable(['jQuery'])
};

myViewModel.selected.subscribe(function(newValue) {
       console.log(newValue);
    });

$(document).ready(function(){
    ko.applyBindings(myViewModel);
});