title: Knockout.js adding new items to array
body: <p>I am having trouble being able to programatically add elements to an observable array contained within a table of data.</p>
  
  <p>Each row of the table has a different array that I wish to affect.</p>
  
  <p>The HTML looks like this:</p>
  
  <pre><code>&lt;div class='liveExample'&gt;     
  &lt;h2&gt;Cases&lt;/h2&gt;
  &lt;div id='contactsList'&gt;
      &lt;table class='contactsEditor'&gt;
          &lt;tr&gt;
              &lt;th&gt;Case Number&lt;/th&gt;
              &lt;th&gt;Stage&lt;/th&gt;
              &lt;th&gt;Users&lt;/th&gt;
              &lt;th&gt;Ids&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tbody data-bind="foreach: appearances "&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;input data-bind='value: caseNumber' /&gt;
                  &lt;/td&gt;
                  &lt;td&gt;&lt;input data-bind='value: caseStage' /&gt;&lt;/td&gt;
                  &lt;td&gt; 
                      &lt;ul  data-bind="foreach: subjects"&gt;
                          &lt;li style="list-style-type:none;"&gt;&lt;label data-bind="text: Name"/&gt;&lt;/li&gt;    
                      &lt;/ul&gt;   
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;table&gt;
                          &lt;tbody data-bind="foreach: ids"&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;&lt;input data-bind='value: $data' /&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;a href='#' data-bind='click: $root.removeId'&gt;Delete&lt;/a&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                      &lt;a href='#' data-bind='click: $root.addId'&gt;Add number&lt;/a&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;     
  &lt;p&gt;
      &lt;button data-bind='click: save, enable:appearances().length &gt; 0'&gt;Save to JSON&lt;/button&gt;
  &lt;/p&gt;     
  &lt;textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'&gt; &lt;/textarea&gt;    
  </code></pre>
  
  <p>​</p>
  
  <p>The data and JavaScript looks like this:</p>
  
  <pre><code>enter code here
  var initialData = [{
  "Number": "12000009",
  "Stage": "Inital",
  "Subjects": [{
      "Name": "Andrew McAdam"},
  {
      "Name": "Patrick Brown"}],
  "Ids": [1]},
  {
  "Number": "12000010",
  "Stage": "Inital",
  "Subjects": [{
      "Name": "John Smith"}],
  "Ids": [2, 3]},
  {
  "Number": "12000011",
  "Stage": "Inital",
  "Subjects": [{
      "Name": "James Bonner"}],
  "Ids": [4]},
  {
  "Number": "12000012",
  "Stage": "Processed",
  "Subjects": [{
      "Name": "Henrik Dalgleish"}],
  "Ids": [5]}]
  
  var AppearancesModel = function(appearances) {
  var self = this;
  self.appearances = ko.observableArray(ko.utils.arrayMap(appearances, function(appearance) {
      return {
          caseNumber: appearance.Number,
          caseStage: appearance.Stage,
          subjects: ko.observableArray(appearance.Subjects),
          ids: ko.observableArray(appearance.Ids)
      };
  }));
  
  self.addId = function(appearance) {
      appearance.ids.push("");
  };
  
  self.removeId = function(id) {
      $.each(self.appearances(), function() {
          this.ids.remove(id)
      })
  };
  
  self.save = function() {
      self.lastSavedJson(JSON.stringify(ko.toJS(self.appearances), null, 2));
  };
  
  self.lastSavedJson = ko.observable("")
  }
  
  ko.applyBindings(new AppearancesModel(initialData));​
  </code></pre>
  
  <p>The problem I have is that after the clicking the Add button and entering a value the value in the array is empty string (the value I added when creating the new array element).</p>
  
  <p>I think the issue is that I am adding the new item to the array before I have a value, but I thought that it would be bound to the new inpute so when I executed the Save function the new value would be reflected.</p>
  
  <p>The JsFiddle of the above is at <a href="http://jsfiddle.net/amcgoldrick/3h9GZ/" rel="nofollow">http://jsfiddle.net/amcgoldrick/3h9GZ/</a></p>
  
  <p>Thanks</p>
  
  <p>Andy</p>