title: knockoutjs observablearray make individual item observable
body: <p>i was looking @ 2'nd tutorial "Working with lists and colection" on Knockoutjs.com: <a href="http://learn.knockoutjs.com/#/?tutorial=collections" rel="nofollow">http://learn.knockoutjs.com/#/?tutorial=collections</a></p>
  
  <p>Here's HTML:
      <h2>Your seat reservations ()</h2></p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;&lt;tr&gt;
      &lt;th&gt;Passenger name&lt;/th&gt;&lt;th&gt;Meal&lt;/th&gt;&lt;th&gt;Surcharge&lt;/th&gt;&lt;th&gt;&lt;/th&gt;
  &lt;/tr&gt;&lt;/thead&gt;
  &lt;!-- Todo: Generate table body --&gt;
  &lt;tbody data-bind="foreach: seats"&gt;
      &lt;tr&gt;
          &lt;td&gt; &lt;input data-bind="value: name()"/&gt;&lt;/td&gt;
          &lt;td&gt; &lt;select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"&gt;&lt;/select&gt;&lt;/td&gt;
          &lt;td data-bind="text: formatterPrice"&gt;&lt;/td&gt;
          &lt;!--&lt;td&gt; &lt;a href="#" data-bind="click: $root.removeSeat"&gt;Remove&lt;/a&gt;&lt;/td&gt;--&gt;
          &lt;td&gt; &lt;button data-bind="click: $root.removeSeat"&gt;Remove&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;button data-bind="click: addSeat, enable: seats().length &lt; 5"&gt;Reserve another seat&lt;/button&gt;
  
  &lt;h3 data-bind="visible: totalSurcharge() &gt; 0"&gt;
  Total surcharge: $&lt;span data-bind="text: totalSurcharge().toFixed(2)"&gt;&lt;/span&gt;
  &lt;/h3&gt;
  
  &lt;span data-bind="text: seats()[0].name()" &gt;&lt;/span&gt; &lt;br/&gt;
  &lt;span data-bind="text: seats()[0].meal().mealName" /&gt;
  </code></pre>
  
  <p>Here's ViewModel:</p>
  
  <pre><code>// Class to represent a row in the seat reservations grid
  function SeatReservation(name, initialMeal) {
  var self = this;
  self.name = ko.observable(name);
  self.meal = ko.observable(initialMeal);
  self.formatterPrice = ko.computed(function() {
      var price = self.meal().price;
      return price ? "$" + price.toFixed(2) : "None";
  });
  }
  
  // Overall viewmodel for this screen, along with initial state
  function ReservationsViewModel() {
  var self = this;
  
  // Non-editable catalog data - would come from the server
  self.availableMeals = [
      { mealName: "Standard (sandwich)", price: 0 },
      { mealName: "Premium (lobster)", price: 34.958989 },
      { mealName: "Ultimate (whole zebra)", price: 290.00000 }
  ];    
  
  // Editable data
  self.seats = ko.observableArray([
      new SeatReservation("Steve", self.availableMeals[0]),
      new SeatReservation("Bert", self.availableMeals[1])
  ]);
  
  self.addSeat = function() {
      self.seats.push(new SeatReservation("Steve", self.availableMeals[2]))
  };
  
  self.removeSeat = function(seat) {
      self.seats.remove(seat);
  }
  
  self.totalSurcharge = ko.computed(function() {
      var total = 0;
  
      for(var i = 0; i &lt; self.seats().length; i++) {
          total += self.seats()[i].meal().price;
      }
  
      // alert(total);
      return total;
  });    
  }
  
  ko.applyBindings(new ReservationsViewModel());
  </code></pre>
  
  <p>When i try to change "name" in textbox, my observableArray (seats) doesn't seem to change. Still my span @ bottom shows "Steve" if i try to change first row's textbox.</p>
  
  <p>I've made name() as observable same as meal, and if i change meal (dropdown), my observableArray (seats) seems working.</p>
  
  <p>Please help! </p>