JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
JavaScript
var RouteViewModel = function() {
var self = this;
self.Waypoints = ko.observableArray([]);
};
var WaypointViewModel = function(data) {
var self = this;
self.Latitude = data.lat();
self.Longitude = data.lat();
};
var mappingOptions = {
'Waypoints': {
// overriding the default creation / initialization code
create: function (options) {
return new WaypointViewModel(options.data);
}
}
};
var routeViewModel = new RouteViewModel();
var viewModel = ko.mapping.fromJS(routeViewModel, mappingOptions);
ko.applyBindings(viewModel);
var myArray = [
{ lat: function(){ return "bobby"; }, lng: function(){ return "jones"; }},
{ lat: function(){ return "hanky"; }, lng: function(){ return "poo"; }}
];
var data = {Waypoints: myArray};
viewModel.Waypoints.push(ko.mapping.fromJS(data, mappingOptions));
console.log(ko.toJSON(viewModel));