JSFiddle - React, Tailwind, and code Playground

by samsamet

HTML

<h2>Your seat reservations</h2>

<table>
    <thead><tr>
        <th>Passenger name</th><th>Meal</th><th>Test</th>
    </tr></thead>
    <tbody data-bind="foreach: seats()">
        <tr>
           <td data-bind="text: mealName"></td>
           <td data-bind="text: price"></td>
           <td data-bind="text: $root.cellAdded()"></td>
        </tr>    
    </tbody>
</table>
<button data-bind="click: $root.PushData()">I am Here</button>

JavaScript

// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
   var self = this;
  
   self.cellAdded = function(){
        console.log('Test Added');
        return 'ok';
    };
   
    self.PushData = function(){
        console.log('PushData Called');
        self.seats.push({ mealName: "Standard (sandwich)", price: 0 });
    };


    // Editable data
    self.seats = ko.observableArray([
       { mealName: "Standard (sandwich)", price: 0 },
        { mealName: "Premium (lobster)", price: 34.95 },
        { mealName: "Ultimate (whole zebra)", price: 290 }
    ]);
}

ko.applyBindings(new ReservationsViewModel());