Knockout Mapper

by LucasLorentz

HTML

<script src="https://rawgithub.com/LucasLorentz/knockout.mapper/master/knockout.mapper.js"></script>
<div data-bind="text: JSON"></div>

CSS

body {
 padding: 10px;   
}
table {
 border-collapse: collapse;   
}
table td {
    padding: 5px;   
    border: 1px solid black;
}

JavaScript

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

    self.Id = ko.observable();
    self.FirstName = ko.observable();
    self.LastName = ko.observable();

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

    self.Children = ko.observableArray();

    self.JSON = ko.computed(function() {
        var mapping = {
            $default: 'ignore',
            'FullName': 'auto',
            'Children': {
                $itemOptions: {
                    $default: 'ignore',
                    'FullName': 'auto'
                }
            }
        };
        return ko.mapper.toJSON(self, mapping);
    });
};

function prepareData() {
    var data = {
        "FirstName": "John",
        "LastName": "Doe",
        "FullName": "###",
        "Children": []
    };

    for (var i = 0; i < 20; i++) {
        data.Children.push({
            'Id': i,
            'FirstName': 'John' + i,
            'LastName': 'Doe' + i,
            "FullName": "###"
        });
    }

    return data;
}

var mapping = {
    $type: Model,
    'FullName': 'ignore',
    'Children': {
        $key: 'Id',
        $itemOptions: function() {
            return mapping;
        }
    }
};

var model = ko.mapper.fromJS(prepareData(), mapping);
ko.applyBindings(model);