title: Knockout "with" binding
body: <p>I am trying to display descendant elements in array using "with" binding.
  But it displays only last items in "exercises" and I want to see all of them. How is it possible to fix this?
  And after that, how can I make each item in array editable?</p>
  
  <p>My ViewModel:</p>
  
  <pre><code>    function AppViewModel() {   
      var self = this;
  
      self.workouts = ko.observableArray([
          {name: "Workout1", exercises:{
              name: "Exercise1.1",
              name: "Exercise1.2",
              name: "Exercise1.3"
          }},
          {name: "Workout2", exercises:{
              name: "Exercise2.1",
              name: "Exercise2.2",
              name: "Exercise2.3"
          }},
          {name: "Workout3", exercises:{
              name: "Exercise3.1",
              name: "Exercise3.2",
              name: "Exercise3.3"
          }},        
          {name: "Workout4", exercises:{
              name: "Exercise3.1",
              name: "Exercise3.2",
              name: "Exercise3.3"
          }},        
  
  ]);
  
      self.removeWorkout = function() {
          self.workouts.remove(this);
      };
  }
  
  ko.applyBindings(new AppViewModel());
  </code></pre>
  
  <p>The View:</p>
  
  <pre><code>&lt;div class="content"&gt;
      &lt;ul data-bind="foreach: workouts"&gt;
          &lt;li&gt;
          &lt;span data-bind="text: name"&gt; &lt;/span&gt;
           &lt;a href="#" data-bind="click: $parent.removeWorkout"&gt;Remove&lt;/a&gt;
           &lt;ul data-bind="with: exercises"&gt;
              &lt;li data-bind="text: name"&gt;&lt;/li&gt;
           &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's this code at jsfiddle: 
  <a href="http://jsfiddle.net/9TrbE/" rel="nofollow">http://jsfiddle.net/9TrbE/</a></p>
  
  <p>Thanks!</p>