title: knockout observable array not updating after ajax addition
body: <p>I have an observable array of a complex object. The initial load is fine, and all the expected data looks fine. Now I am working on POSTing new items to that array. NOTE: The observable array is being loaded via ASP.NET ajax web api call.</p>
  
  <p>posting a new item works fine as far as saving it to the database, but my DOM is not getting updated with the new item and I don't know what I am missing.</p>
  
  <p>Here is the entire ViewModel</p>
  
  <pre><code>    function ClientList() {
      //data
      var self = this;
      self.initialized = ko.observable(false);
      self.clients = ko.observableArray();
      self.userId = ko.observable("");
      self.name = ko.observable("");
      self.logo = ko.observable("");
      self.projects = ko.observableArray();
      self.clientAddress = ko.observableArray();
  
  
      self.addClient = function () {
          var client = {
              UserId: self.userId,
              Name: self.name,
              Logo: self.logo,
          }
          client = ko.toJSON(client);
          lucidServer.addClient(client);
          self.clients.push(client);
      }.bind(self);
  
      (function () {
          $.ajax({
              url: lucidServer.getClients(1),
              success: function (data) {
                  ko.mapping.fromJS(data, {}, self.clients);
                  self.initialized(true);
              }
          });
      })();
  };
  
  function IncompleteStoriesList() {
      //data
      var self = this;
      self.initialized = ko.observable(false);
      self.stories = ko.observableArray();
      (function () {
          $.ajax({
              url: lucidServer.getIncompleteStory(1),
              success: function (data) {
                  ko.mapping.fromJS(data, {}, self.stories);
                  self.initialized(true);
              }
          });
      })();
  };
  
  
  function ViewModel() {
      var self = this;
      self.clientList = new ClientList();
      self.storyList = new IncompleteStoriesList();
  }
  
  ko.applyBindings(new ViewModel());
  </code></pre>
  
  <p>Here is the particular snippet where I am doing the POST (within the ClientList() function).</p>
  
  <pre><code>self.addClient = function () {
          self.client = {
          UserId: self.userId(),
          Name: self.name(),
          Logo: self.logo(),
          }
      //make client object to send to server
      var client = ko.toJSON(self.client);
      lucidServer.addClient(client);
      //push the self.client to the observablearray of clients
      self.clients.push(self.client);
  }.bind(self);
  </code></pre>
  
  <p>I verified it is JSON that is sitting inside the client variable, and no error messages are getting thrown, so I am confused. After I add an item and refresh the entire page, it will show up in the list.</p>
  
  <p>EDIT: here is the html associated:</p>
  
  <pre><code>&lt;form data-bind="submit: clientList.addClient"&gt;
      &lt;div&gt;
          &lt;label&gt;userId&lt;/label&gt;
          &lt;input type="text" data-bind="value: clientList.userId" /&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label&gt;name&lt;/label&gt;
          &lt;input type="text" data-bind="value: clientList.name" /&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label&gt;logo&lt;/label&gt;
          &lt;input type="text" data-bind="value: clientList.logo" /&gt;
      &lt;/div&gt;
      &lt;button type="submit"&gt;Add&lt;/button&gt;
  
      &lt;/form&gt;
  
      &lt;!-- ko ifnot: clientList.initialized --&gt;
      &lt;span&gt;Loading...&lt;/span&gt;
      &lt;!-- /ko --&gt;
      &lt;ul data-bind="template:{name: 'clientList', foreach:clientList.clients}"&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>And the external template looks like this:</p>
  
  <pre><code>&lt;div id="clientListOutput"&gt;
  
      &lt;li&gt;&lt;span data-bind="text: name"&gt;&lt;/span&gt;
          &lt;div data-bind="template: {foreach: clientAddress}"&gt;
              &lt;span data-bind="text: city"&gt;&lt;/span&gt;
              &lt;span data-bind="text: state"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;hr /&gt;
          &lt;ul data-bind="template: {foreach: projects}"&gt;
              &lt;li&gt;
                  &lt;span data-bind="text: name"&gt;&lt;/span&gt;
                  &lt;span data-bind="text: summary"&gt;&lt;/span&gt;
                  &lt;span data-bind="text: description"&gt;&lt;/span&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  </code></pre>