JSFiddle - React, Tailwind, and code Playground

by vyshniakov

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
    <button data-bind="click: addEmployee">Add</button>
    <div id="displayEmployees" style="margin-top:10px;display: block">
        <table id="employeeDataTable" class="groupBorder">
            <thead>
                <tr>
                    <th></th>
                    <th>Employee</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: employees">
                <tr>
                    <td>
                        <a href="#" data-bind="click: $parent.removeEmployee">Remove</a>
                        <input type="hidden" data-bind="value: searchId"/>
                    </td>
                    <td><span data-bind="text: searchText"></span></td>
                </tr>               
            </tbody>
        </table>
    </div>

JavaScript

function Employee(id, text) {
    var self = this;
    self.searchId = id;
    self.searchText = text;
}

var initialData = {
    EmployeeList: [new Employee(1, "Peter"), new Employee(2, "Alex")],
    SearchText: "Peter",
    SearchTextId: 1
};

function ViewModel() {
    var self = this;
    self.employees = ko.observableArray(initialData.EmployeeList);
    self.searchText = ko.observable(initialData.SearchText);
    self.searchTextId = ko.observable(initialData.SearchTextId);
    self.removeEmployee = function(employee) {
        self.employees.remove(employee);
    };
    self.addEmployee = function() {
        alert(self.searchText());
        self.employees.push(new Employee(self.searchTextId, self.searchText));
    };
    self.save = function() {
        ko.utils.postJson(location.href, {
            employees: self.employees
        });
    };
}
ko.applyBindings(new ViewModel());