KO mapping inheritance testing

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>
<ul data-bind="foreach: Items">
    <li>
        <span data-bind="text: Name"></span> -
        <span data-bind="text: Salutation"></span>
    </li>
</ul>

JavaScript

function ItemModelBase(data, mapping)
    {
        this.Name = ko.observable();
        
        if(data)
            ko.mapping.fromJS(data, mapping, this);       
    }
    
    function ItemModel(data, mapping)
    {
        var _this = this;
        
        ItemModelBase.call(this, data, mapping);
            
        this.Salutation = ko.computed(function() { return 'Hello ' + _this.Name(); });
    }
    
    // Comment this out and it works
    ItemModel.prototype = new ItemModelBase;
    
    function Model()
    {
        var _this = this;
        
        var _mapping = {
            'Items': {
                create: function(o) { return new ItemModel(o.data); }
            }
        };
        
        this.Items = ko.observableArray();
        
        this.load = function()
        {
            ko.mapping.fromJS({ 
                Items: [
                    { Name: 'Aardvark' },
                    { Name: 'Bat' },
                    { Name: 'Cheetah' },
                    { Name: 'Duiker' },
                    { Name: 'Ocelot' }
                ]
            }, _mapping, _this);                          
        };
    }
    
    var model = new Model();
    ko.applyBindings(model);
    model.load();