Custom binding dropdown

by spring1975

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.debug.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<button class="getData">Get Data</button>

<button class="updateData">Update DownloaderClients</button>


<div id="Downloaders">
    <select id="DefaultDownloader" data-bind="options: downloaders.filtered, optionsText: 'Description', value: downloaders.DownloaderSelected, optionsCaption: '- Choose Downloader -'"></select>
    <!--, valueUpdate: DownloaderSelected -->
</div>
<div data-bind="clickToEdit: gotDataAt"></div>

<pre data-bind="text: JSON.stringify(ko.mapping.toJS(downloaders.DownloaderSelected), null, 2)"></pre>

JavaScript

var myFauxDownloaders = [{
    "IDDownloaderClient": 1,
        "Description": "my laptop",
        "WhenConnected": "2013-04-04T14:00:00.0000000-07:00",
        "Connected": false
}, {
    "IDDownloaderClient": 2,
        "Description": "my desktop",
        "WhenConnected": "2013-04-04T10:00:00.0000000-07:00",
        "Connected": true
}];

var myFauxDownloaders2 = [{
    "IDDownloaderClient": 2,
        "Description": "my desktop",
        "WhenConnected": "2013-04-04T10:00:00.0000000-07:00",
        "Connected": true
}, {
    "IDDownloaderClient": 3,
        "Description": "my work",
        "WhenConnected": "2013-04-08T10:00:00.0000000-07:00",
        "Connected": false
}, {
    "IDDownloaderClient": 4,
        "Description": "my other desktop",
        "WhenConnected": "2013-04-07T09:00:00.0000000-07:00",
        "Connected": true
}];



var viewModel = {}, downloaderModel = {};

function DownloaderModel(data) {
    downloaderModel = ko.mapping.fromJS(data, {}, this);
}

function RootModel(data, mappingOptions) {
    var rootModel = ko.mapping.fromJS(data, mappingOptions);

    rootModel.downloaders.filtered = ko.computed(function() {
            var onlineDownloaders = ko.utils.arrayFilter(rootModel.downloaders(), function (downloader) {
                return downloader.Connected();
            });
            var orderedOnlineDownloaders = onlineDownloaders.sort(function (left, right) {
                return left.WhenConnected() == right.WhenConnected() ? 0 : (left.WhenConnected() > right.WhenConnected() ? -1 : 1); //switched sign for asc
            });
            return orderedOnlineDownloaders;
    });
    
    rootModel.downloaders.DownloaderSelected = ko.observable();
    
    rootModel.downloaders.filtered.subscribe(function(newValue) {
       rootModel.downloaders.DownloaderSelected(newValue[0]); 
    });
    
    //trigger the subscription right now, to populate the value initially
    rootModel.downloaders.valueHasMutated();

    //Just...