Knockout - Bootstrap SelectPicker

Shows how to bind Bootstrap Select from https://github.com/silviomoreto/bootstrap-select and Knockout for Bootstrap 3 and knockout 3

by Sourabh Tewari

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.3.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://silviomoreto.github.io/bootstrap-select/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="http://silviomoreto.github.io/bootstrap-select/bootstrap-select.min.css">
<div class="container body-content">
    <div>Name : <span data-bind="text: Name"></span>

    </div>The select control should be below
    <select data-bind="selectPicker: teamID, optionsText: 'text', optionsValue : 'id', options: teamItems "></select>
    
    <!-- Multiple Select -->
<select data-bind="selectedOptions: teamID, 
                   options: teamItems, 
                   optionsText: 'text', 
                   optionsValue : 'id', 
                   selectPicker: {}" multiple="true"></select>
    <div>Selected Value(s)
        <div data-bind="text: teamID"></div>
    </div>
</div>

JavaScript

function ViewModel() {
     var self = this;
     this.Name = ko.observable("Chris");
     this.teamItems = ko.observableArray([{
         text: 'Chris',
         id: 1
     }, {
         text: 'Peter',
         id: 2
     }, {
         text: 'John',
         id: 3
     }]);
     this.teamID = ko.observableArray([2]);
 }

ko.bindingHandlers.selectPicker = {
  after: ['options'],   /* KO 3.0 feature to ensure binding execution order */
  init: function (element, valueAccessor, allBindingsAccessor) {
     var $element = $(element);
     $element.addClass('selectpicker').selectpicker();

     var doRefresh = function() {
         $element.selectpicker('refresh');
     },  subscriptions = [];

     // KO 3 requires subscriptions instead of relying on this binding's update
     // function firing when any other binding on the element is updated.

     // Add them to a subscription array so we can remove them when KO
     // tears down the element.  Otherwise you will have a resource leak.
     var addSubscription = function(bindingKey) {
         var targetObs = allBindingsAccessor.get(bindingKey);

         if ( targetObs && ko.isObservable(targetObs )) {
            subscriptions.push( targetObs.subscribe(doRefresh) );
         }
     };

     addSubscription('options');
     addSubscription('value');           // Single
     addSubscription('selectedOptions'); // Multiple

     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
         while( subscriptions.length ) {
             subscriptions.pop().dispose();
         }
     } );
   },
   update: function (element, valueAccessor, allBindingsAccessor) {
   }
 };



 ko.applyBindings(new ViewModel());