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();
        
        // DOES NOT WORK 
        this.AlternateField = {};       
        
        // WORKS
        //this.AlternateField = ko.observable();       
        
		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('FOUND SUBFIELD', o.data);
											
						return o.data ? new NS.FieldModel(o.data) : null;
					}
			}
		});
		
		this.Test = ko.observable(_itest++);

		NS.FieldModelBase.call(_this, data, _mapping);
	}		

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

	ko.applyBindings(model);