Stack Overflow Code

by jlspake

HTML

<script src="https://knockoutjs.com/downloads/knockout-3.4.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
 <div>StoreName: <span data-bind="text: BikeShop().StoreName"></span></div> 
 <div>CompoundId: <span data-bind="text: BikeShop().CompoundId"></span></div> 
 <div>BikeShopExtra: <span data-bind="text: BikeShop().BikeShopExtra"></span></div> 

 <hr />
<!--ko foreach: BikeShop().Customers -->
 <div>CustomerName: <span data-bind="text: Name"></span></div> 
 <div>CompoundId: <span data-bind="text: CompoundId"></span></div> 
 <div>CustomerExtra: <span data-bind="text: CustomerExtra"></span></div> 
<!-- /ko -->
<hr />
<div>MainTest: <span data-bind="text: MainTest"></span></div>

JavaScript

window.Application = window.Application || { Config: {}, Models: { }, Mappings: { } };

window.Application.App = (function ($, ko) {

    var init = function (opts) {
       var vm = new Application.Models.Main();
       ko.mapping.fromJS(opts.model, Application.Mappings.Main, vm);
       ko.applyBindings(vm);
    };

    return {
        Init: init
    };

}(jQuery, ko));

window.Application.Models.Main = function () {
    console.log("Main");
    var self = this;

		self.BikeShop = ko.observable(window.Application.Models.BikeShop());
    self.MainTest = ko.observable(self.BikeShop().BikeShopExtra());
};

window.Application.Models.BikeShop = function () {
    console.log("BikeShop");
    var self = this;
    
    self.Id = ko.observable();
		self.StoreName = ko.observable();
    self.Customers = ko.observableArray([]);
    
    self.CompoundId = ko.computed({
      read: function () {
        return self.Id() + "-" + self.StoreName();
      }
    });
 		self.BikeShopExtra = ko.observable("Bike Shop Extra");
};

window.Application.Models.Customer = function () {
    console.log("Customer");
    var self = this;
    
    self.Id = ko.observable();
		self.Name = ko.observable();
    
    self.CompoundId = ko.computed({
      read: function () {
        return self.Id() + "-" + self.Name();
      }
    });
    
  self.CustomerExtra = ko.observable("Customer Extra");
};

window.Application.Mappings.Main = {
    'BikeShop': {
        create: function (obj) {
            console.log("Mappings Main -> BikeShop: ");
            var model = new Application.Models.BikeShop();
            ko.mapping.fromJS(obj.data, Application.Mappings.BikeShop, model);
            return model;
        }
    }
};

window.Application.Mappings.BikeShop = {
    'Customers': {
        key: function (data) {
            return ko.utils.unwrapObservable(data.Id);
        },
        create: function (obj) {
            console.log("Mappings BikeShop -> Customer: ");
            var model = new...