KO custom binding - Chosen

by Vikash Kumar Gupta

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select name="abc" 
        id="chosen-select"
        class="chosen"
        data-bind="options: myList,
                   optionsText: 'name',
                   optionsValue: 'id',
                   optionsCaption: 'Caption Text...',
                   chosen: {}">
  
</select>
<input type="button" value="Add" data-bind="click:add"/>

JavaScript

function Test(){
 var self = this;
 this.myList = ko.observableArray([
 	{id:1, name: 'a'},
  {id:2, name: 'b'}
  ]);
 this.myNumber = 1;
 this.add = function(){
 	this.myNumber+=1;
 	self.myList.push({ id: self.myNumber, name: 'c'});
 };
}

ko.bindingHandlers.chosen= {
	init: function(element, valueAccessor, allBindingAccessor, viewModel){
  			var $element =  $(element);
        var options = ko.unwrap(valueAccessor());
        
        if(typeof options === "object"){
        	$element.chosen(options);
        }else{
        	$element.chosen();
        }
  },
  
  update: function(element, valueAccessor, allBindingAccessor, viewModel){
  	
    			var optionsBinding = allBindingAccessor.get('options');
          if(ko.isObservable(optionsBinding)){
          	optionsBinding.subscribe(function(value){
            	$(element).trigger('chosen:updated');
            })
          }
    $(element).trigger("chosen:updated");
  }
}


ko.applyBindings(new Test());