title: knockout.js - add/remove items from child list of model
body: <p>I have a foreach template displaying a list of jobs on a page.  Inside each job I have a list of job notes.  I'm having trouble setting up the proper observable to allow for the job notes to be updated in the view.  </p>
  
  <p>Here is a link to a jsFiddle: <a href="http://jsfiddle.net/b3B8p/" rel="nofollow">http://jsfiddle.net/b3B8p/</a></p>
  
  <p>Or, here is the code as it stands.  I'm not sure whether to put the observable array of the sublist into the Job object itself or into the View...</p>
  
  <pre><code>&lt;div data-bind="foreach: jobs"&gt;
      &lt;div&gt;
          &lt;div class="jobContainer"&gt;
              &lt;label data-bind="text: JobTitle"&gt;&lt;/label&gt; 
              &lt;label data-bind="text: CompanyName"&gt;&lt;/label&gt;
              &lt;div class="jobDetails" data-bind="visible: expanded"&gt;
                  &lt;label data-bind="text: City"&gt;&lt;/label&gt;
                  &lt;label data-bind="text: State"&gt;&lt;/label&gt;
                  &lt;div data-bind="foreach: Notes"&gt;
                      &lt;label data-bind="text: Text"&gt;&lt;/label&gt;               
                  &lt;/div&gt; 
              &lt;/div&gt;                           
          &lt;div&gt;
          &lt;a href="#" data-bind="click: $parent.toggle, text: linkLabel"&gt;Expand&lt;/a&gt; 
          &lt;a href="#" data-bind="click: $parent.addNote"&gt;Add Note&lt;/a&gt;  
      &lt;/div&gt;    
  &lt;/div&gt;    
  
  
  function JobNote() {
      this.Text = "some text!";       
  }
  
  function Job() {
      this.JobTitle = ko.observable("some job");
      this.CompanyName = ko.observable("some company");
      this.City = ko.observable("some city");
      this.State = ko.observable("some state");
      this.Notes = ko.observableArray([
         new JobNote(),
         new JobNote(),       
      ]);
  
      this.someValue = ko.observable().extend({ defaultIfNull: "some default" });
  
      this.expanded = ko.observable(false);
  
      this.linkLabel = ko.computed(function () {
          return this.expanded() ? "collapse" : "expand";
      }, this);      
  };
  
  var viewModel = function () {
      this.jobs= ko.observableArray([
          new Job(),
          new Job(),
          new Job(),
          new Job(),
          new Job(),
          new Job(),
          new Job(),
          new Job(),
          new Job(),        
          new Job(),
      ]);
  
      this.toggle = function (item) {
          item.expanded(!item.expanded());
      }
  
      this.addNote = function(job) {
           // what should go in here?
      }    
  };
  
  ko.applyBindings(new viewModel());​
  </code></pre>