JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<h3 data-bind="visible: Passengers().length > 0">Your passengers: </h3>
<ul data-bind="foreach: Passengers">
    <li>
        <span data-bind="text: FirstName, visible: !Editable(), click: Edit"></span>
        <input type="text" data-bind="value: FirstName, visible: Editable()" />
        -
        <span data-bind="text: LastName, visible: !Editable(), click: Edit"></span>
        <input type="text" data-bind="value: LastName, visible: Editable()" />
      <a href="#" data-bind="click: Edit, text: Editable() ? 'Save' : 'Edit'"></a> |  
      <a href="#" data-bind="click: Delete">Delete</a>
    </li>
</ul>

<!-- ko with: SelectedPassenger-->
<label class="control-label">First Name</label>
<div class="controls">
    <input type="text" data-bind="value: FirstName" placeholder="First Name" />
</div>
<label class="control-label">Last Name</label>
<div class="controls">
    <input type="text" data-bind="value: LastName" placeholder="Last Name" />
</div>

<button data-bind="click: Add">Add</button>
<!-- /ko -->

JavaScript

function Passenger() {
    var self = this;

    self.FirstName = ko.observable();
    self.LastName = ko.observable();
    self.Editable = ko.observable(false);


    self.Add = function () {
        vm.Passengers.push(self);
        vm.SelectedPassenger(new Passenger());
    };

    self.Delete = function () {
        vm.Passengers.remove(self);
    };

    self.Edit = function () {
        self.Editable(!self.Editable());
    };
}


function viewModel() {
    var self = this;

    self.Passengers = ko.observableArray();
    self.SelectedPassenger = ko.observable(new Passenger());
}

    var vm = new viewModel();
    ko.applyBindings(vm);