hotcoder · July 8, 2014 21:13
diff --git a/seat reser b/seat reser
 <!DOCTYPE html>
 <html>
  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
    <script type="text/javascript" src="seatreserv.js"></script>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Passenger Name</th>
          <th>Meal</th>
          <th>Amount ($)</th>
          <th></th>
        </tr>
      </thead>
      <tbody data-bind="foreach: seats">
        <tr>
          <td data-bind="text: name"></td>
          <td>
          <select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
          <td data-bind="text: formattedPrice"></td>
          <td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>
        </tr>
        <tr>
          <td>
          <ul data-bind="foreach: namesLists">
              <li>
              <span data-bind="text:Name"></span>
              <!--<span><button data-bind="click: $root.addNewName, enable: seats().length < 3">Add Another name</button></span>-->

              <span><button data-bind="click: function(data, event) { $root.addNewName($parent,data) }">Add Another name</button></span>
              </li>
          </ul></td>
        </tr>
      </tbody>
    </table>
    <button data-bind="click: addSeat, enable: seats().length < 3">Reserve Another Seat</button>
    <h3 data-bind="visible: totalAmount() > 0">Total Amount: $<span data-bind="text: totalAmount().toFixed(2)"></span></h3>
  </body>
  
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
	<script type="text/javascript" src="seatreserv.js"></script>
	</head>
	<body>
	<table>
	<thead>
	<tr>
	<th>Passenger Name</th>
	<th>Meal</th>
	<th>Amount ($)</th>
	<th></th>
	</tr>
	</thead>
	<tbody data-bind="foreach: seats">
	<tr>
	<td data-bind="text: name"></td>
	<td>
	<select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
	<td data-bind="text: formattedPrice"></td>
	<td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>
	</tr>
	<tr>
	<td>
	<ul data-bind="foreach: namesLists">
	<li>
	<span data-bind="text:Name"></span>
	<!--<span><button data-bind="click: $root.addNewName, enable: seats().length < 3">Add Another name</button></span>-->

	<span><button data-bind="click: function(data, event) { $root.addNewName($parent,data) }">Add Another name</button></span>
	</li>
	</ul></td>
	</tr>
	</tbody>
	</table>
	<button data-bind="click: addSeat, enable: seats().length < 3">Reserve Another Seat</button>
	<h3 data-bind="visible: totalAmount() > 0">Total Amount: $<span data-bind="text: totalAmount().toFixed(2)"></span></h3>
	</body>

	</html>