Knockoutjs.com - Better list example

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

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<div class='list'>
    <p>Stored procedures:</p>
    <select multiple="multiple" data-bind="options:storedProceduresInDB1, optionsText: 'Name', optionsValue: 'Id'"></select>
</div>
<br>
<br>
<div class='list'>
    <p>Stored procedures:</p>
    <select multiple="multiple" data-bind="options:storedProceduresInDB2, optionsText: 'Name', optionsValue: 'Id'"></select>
</div>
<br>
<br>
<div data-bind="if: (storedProceduresInDB1().length > 0 &&
 storedProceduresInDB2().length > 0 && missingStoredProceduresInDatabase1().length > 0)">
    <ul data-bind="foreach: missingStoredProceduresInDatabase1">
        <li>Missing in DB1: <b data-bind="text: value"> </b>

        </li>
    </ul>
</div>
<br>
<br>

<div>Data2
<ul data-bind="foreach: missingStoredProceduresInDatabase2">
        <li>Missing in DB2: <b data-bind="text: value"> </b>

        </li>
    </ul>
</div>
<div data-bind="if: (storedProceduresInDB1().length > 0 &&
 storedProceduresInDB2().length > 0 && missingStoredProceduresInDatabase2().length > 0)">
    <ul data-bind="foreach: missingStoredProceduresInDatabase2">
        <li>Missing in DB2: <b data-bind="text: value"> </b>

        </li>
    </ul>
</div>
<button data-bind="click: compare, enable: (storedProceduresInDB1().length > 0 && storedProceduresInDB2().length > 0)">Compare Data</button>

CSS

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

var missingStoredProceduresInDatabase1 = [];
var missingStoredProceduresInDatabase2 = [];

var SProcsViewModel = function () {
    var self = this;
    self.storedProceduresInDB1 = ko.observableArray([{
        Name: 'SP1',
        Id: 1
    }, {
        Name: 'SP2',
        Id: 2
    }, {
        Name: 'SP3',
        Id: 3
    }, {
        Name: 'SP4',
        Id: 4
    }]);
    self.storedProceduresInDB2 = ko.observableArray([{
        Name: 'SP5',
        Id: 5
    }, {
        Name: 'SP6',
        Id: 6
    }, {
        Name: 'SP7',
        Id: 7
    }, {
        Name: 'SP8',
        Id: 8
    }]);

    self.missingStoredProceduresInDatabase1 = ko.observableArray(missingStoredProceduresInDatabase1);

    self.missingStoredProceduresInDatabase2 = ko.observableArray(missingStoredProceduresInDatabase2);

    self.compare = function () {
       console.log('items missing in database1', self.missingInDb1());
       //console.log('items missing in database2', self.missingInDb2());
    };

    self.missingInDb1 = ko.dependentObservable(function () {
        var differences = ko.utils.compareArrays(self.storedProceduresInDB2(), self.storedProceduresInDB1());
         
        //return a flat list of differences
        var results = [];
        ko.utils.arrayForEach(differences, function (difference) {
        //console.log("Lin1:" + difference);
        //console.log("Lin2:" + difference.status);
            if (difference.status === "deleted") {
                results.push(difference.value);
            }
        });        
        return results;
    })
     
     /*
    self.missingInDb2 = ko.dependentObservable(function () {
        var differences = ko.utils.compareArrays(self.storedProceduresInDB1(), self.storedProceduresInDB2());
        //return a flat list of differences
        var results = [];
        ko.utils.arrayForEach(differences, function (difference) {
            if (difference.status === "deleted") {
               ...