knockout wrapper for Eric Hynd's jQuery UI MultiSelect Widget

knockout wrapper for Eric Hynd's jQuery UI MultiSelect Widget

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="http://github.com/ehynds/jquery-ui-multiselect-widget/raw/1.13/jquery.multiselect.css">
<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="https://raw.github.com/ericpanorel/ko-jQuery-UI-MultiSelect-Widget/master/ko-multi-wrapper.js"></script>
<script src="https://raw.github.com/ericpanorel/jquery-ui-multiselect-widget/patch-1/src/jquery.multiselect.js"></script>
<h1>Knockout with jQuery UI MultiSelect Widget</h1>
<div style="width:100%;">
<select data-bind="multiSelectCheck: mailingList, optionsCaption: 'Check one or more', selectedOptions: selectedRec, optionsText: 'Key'"  multiple="multiple">
</select>

<select data-bind="multiSelectCheck: listOfString, optionsCaption: 'Check one or more', selectedOptions: selectedRec2"  multiple="multiple">
</select>
 </div>
<hr/>

<div style='width:100%'>
<h2>Debug</h2>
<pre data-bind="text:ko.utils.debugInfo(selectedRec)"></pre>
<br/>
<pre data-bind="text:ko.utils.debugInfo(selectedRec2)"></pre>
</div>

CSS

html {
    font-size: 80%;
}

body > div {
    margin-top: 1em;
}

body > div > label {
    display: inline-block;
    width: 8em;
    margin-right: 0.2em;
    text-align: right;
}

/* This is the content of  jquery.multiselect.css */

.ui-multiselect { padding:2px 0 2px 4px; text-align:left }
.ui-multiselect span.ui-icon { float:right }
.ui-multiselect-single .ui-multiselect-checkboxes input { position:absolute !important; top: auto !important; left:-9999px; }
.ui-multiselect-single .ui-multiselect-checkboxes label { padding:5px !important }

.ui-multiselect-header { margin-bottom:3px; padding:3px 0 3px 4px }
.ui-multiselect-header ul { font-size:0.9em }
.ui-multiselect-header ul li { float:left; padding:0 10px 0 0 }
.ui-multiselect-header a { text-decoration:none }
.ui-multiselect-header a:hover { text-decoration:underline }
.ui-multiselect-header span.ui-icon { float:left }
.ui-multiselect-header li.ui-multiselect-close { float:right; text-align:right; padding-right:0 }

.ui-multiselect-menu { display:none; padding:3px; position:absolute; z-index:10000; text-align: left }
.ui-multiselect-checkboxes { position:relative /* fixes bug in IE6/7 */; overflow-y:scroll }
.ui-multiselect-checkboxes label { cursor:default; display:block; border:1px solid transparent; padding:3px 1px }
.ui-multiselect-checkboxes label input { position:relative; top:1px }
.ui-multiselect-checkboxes li { clear:both; font-size:0.9em; padding-right:3px }
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label { text-align:center; font-weight:bold; border-bottom:1px solid }
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a { display:block; padding:3px; margin:1px 0; text-decoration:none }

/* remove label borders in IE6 because IE6 does not support transparency */
* html .ui-multiselect-checkboxes label { border:none }

JavaScript

ko.utils.debugInfo = function(items) {
    return ko.computed(function() {
        return ko.toJSON(items, null, 2);
    });
};
var my = my || {};
my.dummyDataJson = [{
    Key: 'Danny Dietz',
    Value: 'US Navy Seal'},
{
    Key: 'John McCain',
    Value: 'US Navy'},
{
    Key: 'Chesty Puller',
    Value: 'Oooh Rah'}
];
my.dummyStrings = ['foo', 'bar', 'ugh'];

my.vm = (function() {
    var mailingList = ko.observableArray(["test1","test2","test3"]),
        listOfString = [],
        selectedRec2 = ko.observableArray([]),
        selectedRec = ko.observableArray([]);

    return {
        mailingList: mailingList,
        selectedRec: selectedRec,
        selectedRec2: selectedRec2
    };
})();

// stuff the choices from a json call ...
my.vm.mailingList(my.dummyDataJson);
my.vm.listOfString = my.dummyStrings;

$(document).ready(function() {
    ko.applyBindings(my.vm);

}); // ready