Knockout - Bootstrap SelectPicker
Shows how to bind Bootstrap Select from https://github.com/silviomoreto/bootstrap-select and Knockout for Bootstrap 3 and knockout 3
HTML
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<link rel="stylesheet" href="//getbootstrap.com/dist/css/bootstrap.min.css">
<script src="//getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//github.com/davidstutz/bootstrap-multiselect/blob/master/dist/css/bootstrap-multiselect.css">
<script src="//rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<select class="select-multiple" multiple="multiple" data-bind="multiselect: _categoryID,
optionsText: '_name',
optionsValue : '_id',
multiselectOptions: { optionsArray: _categories }">
</select>
JavaScript
var SearchFilterViewModel = (function() {
function SearchFilterViewModel() {
this._categories = ko.observableArray([
new Category(name = "Meat-Free Meat", 1),
new Category(name = "Dairy-Free Dairy", 2),
new Category(name = "Confectionery", 3),
new Category(name = "Baking", 4),
new Category(name = "Dessert", 5)
]);
this._categoryID = ko.observableArray([2, 3]);
}
return SearchFilterViewModel;
})();
var Category = (function() {
function Category(name, id) {
this._name = ko.observable(name);
this._id = ko.observable(id);
}
return Category;
})();
ko.bindingHandlers.multiselect = {
init: function(element, valueAccessor, allBindingsAccessor) {
if ($(element).is('select')) {
if (ko.isObservable(valueAccessor())) {
if ($(element).prop('multiple') && $.isArray(ko.utils.unwrapObservable(valueAccessor()))) {
// in the case of a multiple select where the valueAccessor() is an observableArray, call the default Knockout selectedOptions binding
ko.bindingHandlers.selectedOptions.init(element, valueAccessor, allBindingsAccessor);
} else {
// regular select and observable so call the default value binding
ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor);
}
}
$(element).addClass('multiselect').multiselect();
}
},
update: function(element, valueAccessor, allBindingsAccessor) {
if ($(element).is('select')) {
var multiselectOptions = allBindingsAccessor().multiselectOptions;
if (typeof multiselectOptions !== 'undefined' && multiselectOptions !== null) {
var options = multiselectOptions.optionsArray,
optionsText = multiselectOptions.optionsText,
optionsValue = multiselectOptions.optionsValue,
optionsCaption = multiselectOptions.optionsCaption,
isDisabled = multiselectOptions.disabledCondition || false,
resetOnDisabled =...