Knockout JS Dual Combo Box

by LeoJH

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<h3>Top 10 2012 Olympic Medalists</h3>

<div id="dualselect">
    <select multiple="multiple" size="10" data-bind="options:leftItems, selectedOptions: leftSelectedItems, optionsText: 'name'" style="width:40%"> </select>

    <span class="arrow ds_prev"><<</span>
        &nbsp;
    <span class="arrow ds_next">>></span>

    <select multiple="multiple" size="10" data-bind="options: rightItemsFilterd, selectedOptions: rightSelectedItems, optionsText: 'name'" style="width:40%"> </select> 
        </div>
        
        <button>Save Selected</button>

JavaScript

var country = function(code, name) {
    var self = this;
    
    this.code = code;
    this.name = name;
    
    //must implement a custom Equals function
    this.Equals = function(country) {
            return self.code === country.code;
    };
};

var DualSelectBox = function() {
    var self = this;

    this.rightItems = ko.observableArray();
    this.leftItems = ko.observableArray();
    this.rightItemsFilterd = ko.computed(function() {
        var leftItems = self.leftItems;
        var rightItems = self.rightItems;

        for (var leftItemIndex in leftItems()) {
            rightItems.remove(function(rightItem) {
                var leftItem = leftItems()[leftItemIndex];
                return leftItem.Equals(rightItem);
            });
        }

        return rightItems();
    });

    this.leftSelectedItems = ko.observableArray();
    this.rightSelectedItems = ko.observableArray();

    var unselect = function () {
        self.rightSelectedItems.removeAll();
        self.leftSelectedItems.removeAll();
    };
    
    this.initialize = function(data) {
        unselect();
        
        if (data === undefined) throw 'no default data passed';

        initialLeftItems = data.leftItems.slice();
        self.leftItems(data.leftItems.slice());
        self.rightItems(data.rightItems.slice());

        var db = jQuery('#dualselect').find('.arrow'); //get arrows of dual select
        var sel1 = jQuery('#dualselect select:first'); //get first select element
        var sel2 = jQuery('#dualselect select:last'); //get second select element
        if (db.length === 0) throw 'Arrow buttons for dual select were not found';
        if (sel1.length === 0) throw 'First select of dual select was not found';
        if (sel2.length === 0) throw 'Second select of dual select was not found';

        db.click(function() {
            var t = (jQuery(this).hasClass('ds_prev')) ? 0 : 1; // 0 if arrow prev otherwise arrow next
            if (t) {
               ...