knockout - callaghan - loop through rides array

by johnpapa

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
    <div class="page">
        <div id="header">
            <h1>Knockout: Observable Arrays</h1>
        </div>
        <div id="main">
            <div class="showroom">
                <div class="header">
                    <h2>Wait Times</h2>
                    <span data-bind="text: rides().length"></span>
                    <br/>
                    <button data-bind="click: load">Load</button>
                    <button data-bind="click: update">Update Times</button>
                </div>
                <div class="resultsPanel">
                    <table data-bind="foreach:rides">
                        <tr>
                            <td class="photoContainer" data-bind="text:name">
                               
                            </td>
                            <td data-bind="text:waitTime">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

CSS

body {padding: 10px; font: 12px 'SansationRegular', Arial, sans-serif;}
span {
    font: 12px 'SansationRegular', Arial, sans-serif;
    margin: 0px 4px 0px 4px;
}
/*.text*/
.caption {
    font: 12px 'SansationBold', Arial, sans-serif;
    color: olivedrab
}
input, select {
    font: 12px 'SansationRegular', Arial, sans-serif;
    margin: 0px 4px 0px 4px;
    clear: left;
    color: rgb(47, 123, 163);
}
input[type=text] {
    width: 100px;
}
select {
    width: 120px;
}
.negative {
    color: red;
}
.positive {
    color: green;
}
table {
    margin: 8px;
}
thead {
    font: 14px 'SansationBold', Arial, sans-serif;
}
td {
    border-bottom: 1px solid lightgray;
}
.resultsPanel 
{
    margin: 8px;
    padding: 4px;
    height: 300px;
    width: auto;
    border: gray dashed thin;
    overflow:scroll;
    overflow-x: hidden;
}
.guitarListCompact {padding: 10px; margin: 1px; float: left;vertical-align: middle;margin-left: auto;margin-right: auto;
    list-style: none;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;   
    overflow:hidden;
    width: 125px;
    width: 100px;
    /*border: gray dashed 1px;*/
}
.guitarListCompact {padding: 10px; margin: 1px; float: left;vertical-align: middle;margin-left: auto;margin-right: auto;
    list-style: none;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;   
    overflow:hidden;
    width: 125px;
    width: 100px;
    /*border: gray dashed 1px;*/
}
button {
    -moz-box-shadow: inset 0 1px 0 0 #ffffff;
    -webkit-box-shadow: inset 0 1px 0 0 #ffffff;
    -o-box-shadow: inset 0 1px 0 0 #ffffff;
    box-shadow: inset 0 1px 0 0 #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top,...

JavaScript

var my = {};

function Ride() {
    this.id = ko.observable();
    this.name = ko.observable();
    this.waitTime = ko.observable();
}

my.ridesViewModel = {
    rides: ko.observableArray(),
    load: function() {
        this.rides([]); // reset
        var data = my.sampleData.data;
        $.each(data.Rides, function(i, p) {
            my.ridesViewModel.rides.push(new Ride().id(p.Id).name(p.Name).waitTime(p.WaitTime));
        });
    },
    update: function() {
        $.each(my.ridesViewModel.rides(), function(i, p) {
            var waitTime = Math.floor(Math.random() * 15) + 1;
            p.waitTime(p.waitTime() * 10);
        })
    }
}

ko.applyBindings(my.ridesViewModel);

my.sampleData = (function() {
    "use strict";
    var data = {
        Rides: [
            {
            "Id": 1,
            "Name": "Haunted Mansion",
            "WaitTime": 20},
        {
            "Id": 2,
            "Name": "Splash Mountain",
            "WaitTime": 40}
        ]
    };
    return {
        data: data
    };
})();