Adding properties to the view model created by using the Knockout JS mapping plugin

Question

I am working through the mapping plugin example on the Knockoutjs website.

This is the example data.

Knockout JS Mapping Plugin

var data = {
         


        

Answer 1

Another example based on the examples provided by Jason and RP Niemeyer.

data is what we get after an ajax query, on which we add two nested observables (viewModel.weekly.selectedWeek and viewModel.monthly.selectedMonth):

    var data = {
        "date": "2017-03-28",
        "weekly": {
            "weeks": [
                {
                    "id": "201701",
                    "label": "Week 1"
                },
                {
                    "id": "201702",
                    "label": "Week 2"
                }
            ]
        },
        "monthly": {
            "months": [
                {
                    "id": "201701",
                    "label": "01/2017"
                },
                {
                    "id": "201702",
                    "label": "02/2017"
                }
            ]
        }
    }

    var viewModelMapping = {
        create: function (options) {
            return (new (function () {
                // viewModel root level
                var mapping2 = {
                    'weekly': {
                        create: function (options) {
                            // viewModel.weekly
                            return new function () {
                                var model = ko.mapping.fromJS(options.data, {}, this);
                                model.selectedWeek = ko.observable();
                                return model;
                            };
                        }
                    },
                    'monthly': {
                        create: function (options) {
                            // viewModel.monthly
                            return new function () {
                                var model = ko.mapping.fromJS(options.data, {}, this);
                                model.selectedMonth = ko.observable();
                                return model;
                            };
                        }
                    }
                };

                ko.mapping.fromJS(options.data, mapping2, this);
            })());
        }
    };


    var viewModel = ko.mapping.fromJS(data, viewModelMapping);
    ko.applyBindings(viewModel);