http://stackoverflow.com/questions/43446088/knockout-js-adding-a-property-to-child-elements

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div>
  <h4>
  Unmapped model:
  </h4>
  <span data-bind="text: ko.toJSON(model)"></span>
  <h4>
  Mapped view-model:
  </h4>
  <span data-bind="text: ko.mapping.toJSON(mapped)"></span>
</div>

JavaScript

var model = {
  "Id": 0,
  "CurrentUser": {
    "BoardIds": [ { "Id": 0 } ],
    "Id": 1,
    "UserName": "foo",
    "IsOnline": true
  },
  "Boards": []
};

var mappingOption = { 
  'CurrentUser': {
    create: function (options) {
      var currentUser = ko.mapping.fromJS(options.data, {
        'UserName': {
          create: function(options){
            return ko.observable(options.data);
          }
        },
        'include': ["MessageToPost"]
      });
      currentUser.MessageToPost = ko.observable("test");
      return ko.observable(currentUser).extend({ rateLimit: 1000 });
    }
  }
}; 

var viewModel = { model: model, mapped: ko.mapping.fromJS(model, mappingOption) };
ko.applyBindings(viewModel);