Bootstrap-Multiselect with Knockout

Example using Bootstrap-Multiselect with Knockout

by Shrikrishna Gupta

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.2.0.debug.js"></script>
<script src="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
      <label for="select1">Test 1 - Binding to simple arrays</label>
      <br/>
      <select id="select1" multiple="multiple" class="form-control" data-bind="options: availableValues, selectedOptions: selectedValues, multiselect: {
    includeSelectAllOption: true
  }">
      </select>      
    </div>
    <div class="col-sm-6">
      <label for="select2">Test 2 - Binding to objects</label> 
      <br />
      <select id="select2" multiple="multiple" class="form-control" data-bind="options: availableObjects, optionsText: 'name', optionsValue: 'id', selectedOptions: selectedIds, multiselect: {
    includeSelectAllOption: true
  }">
      </select>      
    </div>
  </div>
  <div class="row" style="margin-top: 20px;">
    <div class="col-sm-12">
      <pre id="koDebugData" data-bind="text: ko.toJSON($root, null, 4)"></pre>
    </div>
  </div>
</div>

JavaScript

$(function() {
	var viewModel = { 
  	availableValues: ko.observableArray(["value 1","value 2","value 3","value 4","value 5"]), 
    selectedValues: ko.observableArray(["value 2","value 5"]),
    availableObjects: ko.observableArray([{id:1,name:"object 1"}, {id:2,name:"object 2"},{id:3,name: "object 3"},{id:4,name:"object 4"},{id:5,name:"object 5"}]),
    selectedIds: ko.observableArray([2,5])
  };
  
	ko.applyBindings(viewModel);
    
  //Add a selected value after 2 seconds to test dynamically updating the array.
  setTimeout(function() {
  	viewModel.selectedValues.push('value 4');
    viewModel.selectedIds.push(4);
  }, 2000);
});