Knockout - Bootstrap SelectPicker

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

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.2/cerulean/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-success">
                <div class="panel-heading">KnockoutJS 3.2: Bootstrap Select Example</div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">Select Team Member:</label>
                            <div class="col-sm-8">
                                <select class="form-control show-tick input-sm" data-bind="selectPicker: BSteamMemberID, optionsText: 'text', optionsValue : 'id', value: KOteamMemberID, selectPickerOptions: { optionsArray: teamItems }"></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">Bootstrap Select Observable Value:</label>
                            <div class="col-sm-8">
                                <p class="form-control-static"><span class="label label-primary" data-bind="text: BSteamMemberID"></span>

                                </p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">KnockoutJS "Value" Observable Value:</label>
                            <div class="col-sm-8">
                                <p class="form-control-static"><span class="label label-info"...

CSS

body {
    padding-top: 100px;
}

JavaScript

var jsonDATA = [{
    "id": "TMID-10",
        "text": "Gisela U. Mcclain"
}, {
    "id": "TMID-102",
        "text": "Mia O. Odom"
}, {
    "id": "TMID-106",
        "text": "Hu H. Johnson"
}, {
    "id": "TMID-110",
        "text": "Simone Lawson"
}, {
    "id": "TMID-114",
        "text": "Jorden Morin"
}, {
    "id": "TMID-118",
        "text": "Oscar Price"
}, {
    "id": "TMID-122",
        "text": "Heidi M. Henderson"
}, {
    "id": "TMID-126",
        "text": "Forrest F. Carter"
}, {
    "id": "TMID-130",
        "text": "Kameko Q. Cohen"
}, {
    "id": "TMID-134",
        "text": "Jade Merritt"
}, {
    "id": "TMID-138",
        "text": "Nichole D. Quinn"
}, {
    "id": "TMID-14",
        "text": "Abra D. Cooley"
}, {
    "id": "TMID-142",
        "text": "Brielle M. Weaver"
}, {
    "id": "TMID-146",
        "text": "Sasha Foster"
}, {
    "id": "TMID-150",
        "text": "Holly Sloan"
}, {
    "id": "TMID-154",
        "text": "Perry Chapman"
}, {
    "id": "TMID-158",
        "text": "Roary Ortiz"
}, {
    "id": "TMID-162",
        "text": "Josiah V. Marsh"
}, {
    "id": "TMID-166",
        "text": "Isabella Y. Romero"
}, {
    "id": "TMID-170",
        "text": "Chadwick X. Stuart"
}, {
    "id": "TMID-174",
        "text": "Wade Cole"
}, {
    "id": "TMID-178",
        "text": "Hyacinth Walters"
}];

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...