JSFiddle - React, Tailwind, and code Playground

by Rahul Patil

HTML

<a href="#" data-bind="click:addFields">ADDPerson</a>
<a href="#" data-bind="click:resetPerson">Reset</a>
    <div data-bind="foreach:fields,visible:show">
        <div data-bind="text:firstName"></div>
        <div data-bind="text:lastName"></div>
        <a href="#" data-bind="click:$root.remove">Remove</a>
        <a href="#" data-bind="click:$root.edit" >edit</a>
    </div>
<form data-bind="visible:showfields, with: editForm">
    First Name: 
    <input data-bind="value:firstName"/>
    Last Name:
    <input data-bind="value:lastName"/> 
    <a href="#" data-bind="click:$root.addPerson, visible: $root.showAdd">ADD</a>
</form>

JavaScript

function person(firstName, lastName) {
    var self = this;
    self.firstName = ko.observable(firstName);
    self.lastName = ko.observable(lastName);

}

function personForm(formFirstName, formFirstName) {
    var self = this;
    self.formFirstName = ko.observable("david");
    self.formLastName = ko.observable("rock");
}

function personViewModel() {
    var self = this;
    self.formFirstName = ko.observable("add");
    self.formLastName = ko.observable("Value");
    self.show = ko.observable(true);
    self.showAdd = ko.observable(true);
    self.showfields = ko.observable(false);
    self.editForm = ko.observable(new person());
    self.fields = ko.observableArray([
        new person("paul", "kerry"),
        new person("john", "cena")
    ]);
    self.addFields = function() {
        console.log("ad field");
        self.showfields(true);
        self.showAdd(true);

    };
    self.addPerson = function(person) {        self.showAdd(true);
        self.fields.push(person);
        self.show(true);
        self.showfields(false);
    }
    self.resetPerson = function() {
        self.fields.removeAll();
        self.fields.push(new person("karan", "bhardwaj"));
        self.fields.push(new person("dipankar", "gupta"));
    }
    self.remove = function(person) {
        self.fields.remove(person);
    }
    self.edit = function(person){
        self.showAdd(false);
        self.showfields(true);
        self.editForm(person);
        console.log(person);
    }

    ;
}

ko.applyBindings(new personViewModel());