JSFiddle - React, Tailwind, and code Playground

by CodeRenaissance

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.3/knockout.mapping.js"></script>

JavaScript

var model, mapping, viewmodel;
//Normally this JSON would be returned via ajax.
model = {
    users:[ 
        {
            firstName:"John", 
            lastName:"Doe",
            id:1,
            isDeleted: false
        }
    ]
};

mapping = {
    users:{
        key: function(data) {
            return ko.utils.unwrapObservable(data.id);
        },
        create:function(options){
            var newUser = ko.mapping.fromJS(options.data);
            newUser.isNew = (newUser.id !== null);
            return newUser;
        }
    }
};

viewmodel = ko.mapping.fromJS(model, mapping);

viewmodel.users.delete = function(user){
   user.isDeleted(true);
};

viewmodel.Save = function(){
    $.ajax({
        url: 'ajax/test.html',
        data:ko.mapping.toJs(viewmodel),
        success: function(data) {
            ko.viewmodel.fromJS(data);
        }
    });
};

viewmodel.users.addNew = function(){
    var newUser = {
        firstName:"",
        lastName:"",
        id:null,
        isDeleted: false
    };

    newUser = ko.mapping.fromJS(newUser);

    viewmodel.users.push(newUser);
};

ko.applyBindings(viewmodel);

alert(ko.mapping.toJSON(viewmodel));