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
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/css/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 multiple data-bind="selectPicker: teamID, optionsText: 'text', optionsValue : 'id', selectPickerOptions: { optionsArray: teamItems }"></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, 3]);
}
ko.bindingHandlers.selectPicker = {
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('selectpicker').selectpicker();
}
},
update: function (element, valueAccessor, allBindingsAccessor) {
if ($(element).is('select')) {
var selectPickerOptions = allBindingsAccessor().selectPickerOptions;
if (typeof selectPickerOptions !== 'undefined' && selectPickerOptions !== null) {
var options = selectPickerOptions.optionsArray,
optionsText = selectPickerOptions.optionsText,
optionsValue = selectPickerOptions.optionsValue,
optionsCaption = selectPickerOptions.optionsCaption,
isDisabled = selectPickerOptions.disabledCondition || false,
resetOnDisabled = selectPickerOptions.resetOnDisabled || false;
if...