Nested mapping problem

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<div data-bind="text: console.log({ MODEL: $data })"></div>
<div data-bind="text: ko.mapping.toJSON($data)"></div>

JavaScript

var NS = {};
var _itest = 0;

// =====================================================================
NS.FieldModelBase = function(data, mapping)
{
	var _this = this;

	this.Text = ko.observable();
	this.AlternateField = {};

	if(data)
		ko.mapping.fromJS(data, mapping, _this);
};

// =====================================================================
NS.FieldModel = function(data, mapping, parent)
{
	var _this = this;	

	window.console && console.log('CREATING FIELD', data); 
	
	var _mapping = $.extend({}, mapping, {
        'include': [ 'Test' ],
		'AlternateField': {
			create: 
				function(o) 
				{ 
					window.console && console.log('CREATING SUBFIELD', o.data);
										
					return o.data;
				}
		}
	});
    
    this.Test = ko.observable(_itest++);
    
	NS.FieldModelBase.call(_this, data, _mapping);
}		

NS.FieldModel.prototype = new NS.FieldModelBase;

// =====================================================================
var model = new NS.FieldModel({
	Text: "Main option",
	AlternateField: {
		Text: "Alternate option",
		AlternateField: null
	}
}, { include: [ 'Test' ] });

ko.applyBindings(model);