JSFiddle - React, Tailwind, and code Playground

by vyshniakov

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<div data-bind="foreach: employees">
    <a href="#" data-bind="click: $parent.deleteEmployee, clickBubble: false"> Del </a>

    <div class="row">
        <label for="name">Name</label>
        <input name="name" type="text" data-bind="value: name">
    </div>
              
</div>

<h3>Create</h3>
<div>
    <div class="row">
        <label for="newName">Name</label>
        <input id="newName" name="newName" type="text">
    </div>
    <div class="row">
        <label for="newEmail">Email</label>
        <input id="newEmail" name="newEmail" type="text">
    </div>
    <div class="row">
        <input type="button" value="Create" data-bind="click: addEmployee">
    </div>
</div>

JavaScript

function Employee(id, name, email) {
    var self = this;

    self.id = ko.observable(id);
    self.name = ko.observable(name);
}

function viewModel() {
    var self = this;
    self.employees = ko.observableArray();

    self.deleteEmployee = function() {
        var employee = this;
        self.employees.remove(employee);
    },

    self.addEmployee = function() {
        var emp = {};
        emp.Name = $("#newName").val();
        emp.Email = $("#newEmail").val();
        var employee = new Employee(1, emp.Name, emp.Email);
        self.employees.push(employee);
    }.bind(self);


    self.employees.push(new Employee(1, "test", "email"));


    return {
        employees: self.employees,
        deleteEmployee: self.deleteEmployee,
        addEmployee: self.addEmployee
    };
}

ko.applyBindings(new viewModel());