Knockoutjs.com - Better list example

http://knockoutjs.com/examples/betterList.html

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<div class='list'> 
         
    <p>Stored procedures:</p>
    <select id="resizable" multiple="multiple" height="5" data-bind="options:storedProceduresInDB1, selectedOptions:selectedStoredProceduresInDb1"> </select>
    
    <div>
        <button data-bind="click: copyToDb2, enable: selectedStoredProceduresInDb1().length > 0">Copy to DB2</button>
    </div>
</div>

CSS

/* to set the height and width of the select */
#resizable { height: 150px; width: 500px; }
/* to adjust the position of the dragger */
.ui-resizable-se { bottom: 18px; right: 25px; }

body { font-family: arial; font-size: 14px; }
.list { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 600px; }
.list input { font-family: Arial; }
.list b { font-weight: bold; }
.list p { margin-top: 0.9em; margin-bottom: 0.9em; }
.list select[multiple] { width: 100%; height: 8em; }
.list h2 { margin-top: 0.4em; }

JavaScript

$(function() {
    $('#resizable').resizable({
        minHeight: 100,
        minWidth: 100
        // you could include a maxHeight and maxWidth as well
    });
});

var SProcsViewModel = function () {
    this.storedProceduresInDB1 = ko.observableArray(["SP1", "SP2", "SP3", "SP4"]); 
    this.selectedStoredProceduresInDb1 = ko.observableArray();    
    this.storedProceduresInDB2 = ko.observableArray(["SP5", "SP6", "SP7", "SP8"]); 
    this.selectedStoredProceduresInDb2 = ko.observableArray();                                
    
    this.copyToDb2 = function() {
        var sprocs = [];
        
        $.each(this.selectedStoredProceduresInDb1, function (value) {
                                sprocs.push(value);
                            });       
         this.storedProceduresInDB2.push(sprocs);
    };
    
    this.copyToDb1 = function() {
            var sprocs = [];
         this.storedProceduresInDB1.push(this.selectedStoredProceduresInDb2);
    };
};
 
ko.applyBindings(new SProcsViewModel());