Knockout Mapper & Mapping

by LucasLorentz

HTML

<script src="https://rawgithub.com/LucasLorentz/knockout.mapper/master/knockout.mapper.js"></script>
<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/knockout.mapping.js"></script>
<table>
    <tr>
        <td>Library</td>
        <td>FromJS</td>
        <td>Update FromJS</td>
        <td>ToJS</td>
    </tr>
    <tr>
        <td>Ko Mapping</td>
        <td data-bind="text: mappingFromJSTime"></td>
        <td data-bind="text: mappingUpdateFromJSTime"></td>
        <td data-bind="text: mappingToJSTime "></td>
    </tr>
    <tr>
        <td>Ko Mapper</td>
        <td data-bind="text: mapperFromJSTime"></td>
        <td data-bind="text: mapperUpdateFromJSTime"></td>
        <td data-bind="text: mapperToJSTime"></td>
    </tr>
        <tr>
            <td>Time reduced to</td>
            <td data-bind="text: mapperFromJSPercentage"></td>
            <td data-bind="text: mapperUpdateFromJSPercentage"></td>
            <td data-bind="text: mapperToJSPercentage"></td>
        </tr>
</table>
<br />
Ko Mapping Model:
<div data-bind="text: mappingModel" class="model"></div>
<br />
Ko Mapper Model:
<div data-bind="text: mapperModel" class="model"></div>

CSS

body {
    padding: 10px;   
}
table {
    border-collapse: collapse;   
}
table td {
    padding: 5px;   
    border: 1px solid black;
}
div.model {
    height: 100px;
    overflow: auto;
    border: 1px solid black;
}

JavaScript

var Model = function(data) {
    data = data || {};

    var self = this;

    self.Id = ko.observable(data.id);
    self.FirstName = ko.observable(data.firstName);
    self.LastName = ko.observable(data.lastName);

    self.FullName = ko.computed(function() {
        return self.FirstName() + " " + self.LastName();
    });

    self.Children = ko.observableArray(data.children);
};

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

    self.mappingFromJSTime = ko.observable(0);
    self.mapperFromJSTime = ko.observable(0);
    self.mappingToJSTime = ko.observable(0);
    self.mapperToJSTime = ko.observable(0);
    self.mappingUpdateFromJSTime = ko.observable(0);
    self.mapperUpdateFromJSTime = ko.observable(0);

    self.mapperFromJSPercentage = ko.computed(function() {
        if (!self.mappingFromJSTime()) return 0;
        var percentage = self.mapperFromJSTime() / self.mappingFromJSTime() * 100;
        return percentage.toFixed(0) + '%';
    });
    
    self.mapperUpdateFromJSPercentage = ko.computed(function() {
        if (!self.mappingUpdateFromJSTime()) return 0;
        var percentage = self.mapperUpdateFromJSTime() / self.mappingUpdateFromJSTime() * 100;
        return percentage.toFixed(0) + '%';
    });

    self.mapperToJSPercentage = ko.computed(function() {
        if (!self.mappingToJSTime()) return 0;
        var percentage = self.mapperToJSTime() / self.mappingToJSTime() * 100;
        return percentage.toFixed(0) + '%';
    });

    self.mappingModel = ko.observable();
    self.mapperModel = ko.observable();
}

function prepareData() {
    data = {
        "FirstName": "John",
        "LastName": "Doe",
        "FullName": "###",
        "Children": []
    };
    for (var i = 0; i < 10; i++) {
        data.Children.push({
            "Id": i,
            "FirstName": "A",
            "LastName": "C" + i,
            "FullName": "###"
        });
    }
}

function getDuration(fn, repeat) {
    prepareData();
    var startTime = (new...