JSFiddle - React, Tailwind, and code Playground

by CodeRenaissance

HTML

<script src="http://cloud.github.com/downloads/coderenaissance/knockout.viewmodel/knockout.viewmodel.1.1.js"></script>
<table data-bind="foreach:users">
    <tr data-bind="visible:isDeleted() == false">
        <td><input data-bind="value:firstName"/></td>
        <td><input data-bind="value:lastName"/></td>
        <td><input type="checkbox" data-bind="checked: active" /></td>
        <td><button type="button" data-bind="click:$root.users.Delete">Delete</button></td>
    </tr>
</table>

JavaScript

var model, viewmodel;

//Normally this JSON model would be returned via ajax.
model = {
    users:[ {firstName:"John", lastName:"Doe", active:true},
    {firstName:"James", lastName:"Smith", active:false}]
};

ko.viewmodel.logging = true;//view the console to see logging in action
viewmodel = ko.viewmodel.fromModel(model,{
    extend:{
        "{root}.users[i]": function(user){
            user().isDeleted= ko.observable(false);
        },
        "{root}.users": function(users){
            users.Delete = function(user){
                user.isDeleted(true);
            }
        }
    }
});

ko.applyBindings(viewmodel);