JSFiddle - React, Tailwind, and code Playground

by spring1975

HTML

<script src="http://coderenaissance.github.io/knockout.viewmodel/knockout.viewmodel.js"></script>
<table> <tbody data-bind="foreach: employees">
                                <tr>
                                    <td>
                                        <span data-bind="text: key" />
                                        <br />
                                    </td>
                                    <td>
                                        <span data-bind="text: firstName" />
                                        <br />
                                    </td>
                                    <td>
                                        <span data-bind="text: lastName" />
                                        <br />
                                    </td>
</tr>
    </tbody>
</table>

<a href="#" data-bind="click: updateModel">Change page</a>

JavaScript

var   model = {
"employees": [
{"key":"1" , "firstName":"John" , "lastName":"Doe" }, 
{"key":"2" , "firstName":"Anna" , "lastName":"Smith" }, 
{"key":"3" , "firstName":"Peter" , "lastName":"Jones" }
]
}

var  updatedModel  = {
"employees": [
{"key":"4" , "firstName":"John" , "lastName":"Doe" }, 
{"key":"8" , "firstName":"Joe" , "lastName":"Allen" }, 
{"key":"5" , "firstName":"Anna" , "lastName":"Smith" }, 
{"key":"6" , "firstName":"Peter" , "lastName":"Jones" }
]
}
 
var options= { 
    arrayChildId:{
        "{root}.employees":"key"
    }
}

//If the option is not applied the sort order is mantained
    
var viewmodel = ko.viewmodel.fromModel(model, options);

viewmodel.updateModel=function() {
   ko.viewmodel.updateFromModel(viewmodel, updatedModel);
};
             
ko.applyBindings(viewmodel);