Array test with mapping

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<script src="https://rawgithub.com/rniemeyer/knockout-sortable/master/build/knockout-sortable.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/amplifyjs/1.1.0/amplify.js"></script>
Action items:
<a href="#" data-bind="click: loadStorageData">Load from storage</a> 
<a href="#" data-bind="click: loadInlineData">Load from inline model</a> 
<a href="#" data-bind="click: saveData">Save to storage</a> 
<a href="#" data-bind="click: clearData">Clear data</a> 
<a href="#" data-bind="click: saveDataToInput">Save to JSON (to inputbox)</a> 
<a href="#" data-bind="click: checkValid">Check is valid</a>

<br/>
<br/>Sales person name:
<span data-bind="text:FullName" />
<br/>Regions:
<br/>
<br/>

<a href="#" data-bind="click: addRegion">Region +</a>   <br/>
Region count: <span data-bind="text:Regions().length"></span>
<br/> <br/>
<a href="#" data-bind="click: addCustomer">Customer +</a> <br/>
Customer count: <span data-bind="text:Customers().length"></span>

<div data-bind="sortable:Regions">
    <div class="Regionbox">Region:
    <input data-bind="value:Name" /> <a href="#" data-bind="click: $parent.removeRegion">x</a> 
    </div>
    
</div>

<br />

<div>
    <hr>for clipboard:
        <textarea id="clip" value="" cols="50" rows="10"></textarea>
</div>
        
        
<br />
<hr />
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

CSS

.errorCSS {
    border:1px solid red;
    background-color: #FFFF00;
}

.Regionbox {
    border:1px solid gray;
    background-color: #fdd;
    padding:5px;
    cursor: move;
    width:200px;
    padding: 5px;
    margin: 5px;
}

.Customerbox {
    border:1px solid gray;
    background-color: #C0C0C0;
    padding:5px;
    cursor: move;
    width:600px;
    padding: 3px;
    margin: 3px;    
}

JavaScript

/* Overview:

Sales person can operate in many regions
Sales person can have many customers
..... customers an have many orders

Objective is to show:

(1) show saving/loading using amplify.js with ko.mapping (methods save to storage and load from storage)
(2) show sorting or draggable items using KO sortable plugin
(3) show sending of ViewModel data to server with AJAX post
(4) show getting count of items from mapped observable array

*/


// setup defaults for validation



var Region = function (data) {
    var self = this;
    if (data != null) {
        ko.mapping.fromJS(data, {}, self); 
    } else {
        self.ID = ko.observable();
        self.Name = ko.observable();
    }
}

// define view model
var SalesPerson = function (data) {
    var self = this;
    if (data != null) {
        ko.mapping.fromJS(data, {Regions: regionMapping}, self); 
    } else {
        self.ID = ko.observable();
        self.FullName = ko.observable();
        //self.Regions = ko.observableArray(); 
        self.Regions = ko.mapping.fromJS([]);
        //self.Customers = ko.observableArray(); // array of "Customers", who each have many orders
    }
    // create validation group
    self.orderErrors = ko.validation.group(self);

    self.checkValid = function () {
        if (self.isValid()) {
            alert('All ok!');
        } else {
            self.orderErrors.showAllMessages();
        }
    }

    // operations
    self.addRegion = function () {
        self.Regions.push(new Region({
            ID: null,
            Name: ""
        }));
    }
     
    // load data into model
    self.loadInlineData = function () {
        ko.mapping.fromJS(modeldata, {Regions: regionMapping, Customers: customerMapping}, self);
    }

    self.loadStorageData = function () {
        ko.mapping.fromJS(amplify.store("ArrayArray"), {Regions: regionMapping, Customers: customerMapping},self);
    }
        
    self.Errors = ko.validation.group(self);
}

var regionMapping = {
    create:...