Bootstrap-Multiselect
Can't seem to get the bootstrap-multiselect.js to work properly with Knockout
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<div class="container">
<!-- Content Table -->
<div class="content">
<div class="row">
<div class="col-md-8">
<h1>Products (<span data-bind="text: products().length"></span>)</h1>
</div>
</div>
<table class="table table-hover">
<thead>
<!-- Headers Loop -->
<tr data-bind="foreach: headers">
<th><a href="#"><span data-bind="text: title"></a>
</th>
</tr>
</thead>
<!-- Article Loop -->
<tbody data-bind="foreach: products">
<tr>
<td data-bind="text: retailer"></td>
<td><span data-bind="text: name"></span>
</td>
<td data-bind="text: price"></td>
<td>
<select multiple="multiple" data-bind="options: $root.availableSet, optionsText: 'setName', selectedOptions: set, multiselect: multiSelectInitOptions"></select>
</td>
</tr>
</tbody>
</table>
</div>
<!-- /content -->
</div>
<!-- /container -->
JavaScript
// Due to bootstrap-multiselect.js not being available on CDN, it's included first below.
// My code begins on line 570
/**
* bootstrap-multiselect.js 1.0.0
* https://github.com/davidstutz/bootstrap-multiselect
*
* Copyright 2012, 2013 David Stutz
*
* Dual licensed under the BSD-3-Clause and the Apache License, Version 2.0.
* See the README.
*/
!function($) {"use strict";// jshint ;_;
if ( typeof ko != 'undefined' && ko.bindingHandlers && !ko.bindingHandlers.multiselect) {
ko.bindingHandlers.multiselect = {
init : function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
},
update : function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var ms = $(element).data('multiselect');
if (!ms) {
$(element).multiselect(ko.utils.unwrapObservable(valueAccessor()));
}
else
if (allBindingsAccessor().options && allBindingsAccessor().options().length !== ms.originalOptions.length) {
ms.updateOriginalOptions();
$(element).multiselect('rebuild');
}
}
};
}
function Multiselect(select, options) {
this.options = this.getOptions(options);
this.$select = $(select);
this.originalOptions = this.$select.clone()[0].options;
//we have to clone to create a new reference
this.query = '';
this.searchTimeout = null;
this.options.multiple = this.$select.attr('multiple') == "multiple";
this.$container = $(this.options.buttonContainer).append('<button type="button" class="multiselect dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText(this.getSelected(), this.$select) + '</button>')
.append('<ul class="multiselect-container dropdown-menu' + (this.options.dropRight ? '...