JSFiddle - React, Tailwind, and code Playground

by meetravi

HTML

<script src="http://learn.knockoutjs.com/Scripts/Lib/knockout-1.3.0.latest.js"></script>
<script src="http://learn.knockoutjs.com/Scripts/Lib/jquery.tmpl.js"></script>
<script src="http://learn.knockoutjs.com/scripts/lib/knockout.address.js"></script>
<h2>Your seat reservations</h2>

<table>
    <thead>
        <tr>
            <th>Passenger name  </th>
            <th>Meal</th>
            <th>Surcharge</th>
        </tr>
    </thead>
    <!-- Todo: Generate table body -->
    <tbody>
  
    <tr>
        <td data-bind="text:seats()[0].name"></td>
        <td data-bind="text:seats()[0].availableMeals[0].mealName"></td>
        <td data-bind="text:seats()[0].availableMeals[0].price"></td>
        
    
    </tr>
    <tr>
        <td data-bind="text:seats()[1].name"></td>
        <td data-bind="text:seats()[1].availableMeals[1].mealName"></td>
        <td data-bind="text:seats()[1].availableMeals[1].price"></td>
        
    
    </tr>
      <tr>
        <td data-bind="text:seats()[0].name"></td>
        <td data-bind="text:seats()[0].availableMeals[2].mealName"></td>
        <td data-bind="text:seats()[0].availableMeals[2].price"></td>
        
    
    </tr>
    </tbody>
</table>

JavaScript

// Raw catalog data - would come from the server
var availableMeals = [
    { mealName: "Standard (sandwich)", price: 0 },
    { mealName: "Premium (lobster)", price: 34.95 },
    { mealName: "Ultimate (whole zebra)", price: 290 }
];

// Class to represent a row in the reservations grid
var seatReservation = function(name) {
    this.name = name;
    this.availableMeals = availableMeals;
    this.meal = ko.observable(availableMeals[0]);
}

// Overall viewmodel for this screen, along with initial state
var viewModel = {
    seats: ko.observableArray([
        new seatReservation("Steve"),
        new seatReservation("Bert")
    ])
};

ko.applyBindings(viewModel);