Knockout - load test

by johnpapa

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<div id="result"></div>
<table>
    <thead>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>pet</td>
        </tr>
    </thead>
    <tbody>
        <!-- ko template: {name: "peopleTmpl", foreach: people} -->
        <!-- /ko -->
    </tbody>
</table>

<script id="peopleTmpl" type="text/html">
    <tr>
        <td data-bind="text: id"></td>
        <td data-bind="text: name"></td>
        <td data-bind="text: pet"></td>
    </tr>
</script>

CSS

td{
    padding: 5px;
}

JavaScript

var Person = function(id, name, pet) {
    this.id = id;
    this.name = name;
    this.pet = pet;
};

var vm = (function() {
    var people = [
        new Person(1, 'Haley', 'Soarin Lauren'),
        new Person(2, 'Maddie', 'Gordy Gort'),
        new Person(3, 'Ella', 'Emily')
        ],
        loadMorePeople = function(x) {
            for (var i = 0; i <= x; i++) {
                this.people.push(new Person(i + 100, 'Person' + i, 'Pet' + i));
            }
        };

    return {
        people: people,
        loadMorePeople: loadMorePeople
    };
})();

var times = 1000,
    endTime, 
    result, 
    startTime, 
    places = 1;

vm.loadMorePeople(times);

startTime = new Date().getTime();
ko.applyBindings(vm);
endTime = new Date().getTime();
//result = (((endTime - startTime) * 1000) / times);
result = (endTime - startTime);
//alert(endTime + '... ' + startTime);

$("#result").append(times + ' rows in ' + result.toFixed(places) + 'ms');