title: loading a knockout.js observableArray() from .ajax() call
body: <p>This puzzles me. It must be something small I'm not seeing. I'm trying to load a very simple <code>observableArray</code> in knockout with an ajax call.</p>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>// we bind the array to the view model property with an empty array.
  var data = [];   
  var viewModel = {
      vendors: ko.observableArray(data)
  };
  ko.applyBindings(viewModel);
  
  $(function () {
      // on this click event, we popular the observable array
      $('#load').click(function () {
          // WORKS. Html is updated appropriately.
          viewModel.vendors([{ "Id": "01" },{ "Id": "02" },{ "Id": "03" }]);
  
          // DOES NOT WORK. Fiddler2 shows the same exact json string come back 
          // as in the example above, and the success function is being called.
          $.ajax({
              url: '/vendors/10',
              dataType: 'json',
              success: function (data) {
                  viewModel.vendors(data);
              }
          });
      });
  });
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;button id="load"&gt;Load&lt;/button&gt;
  &lt;ul data-bind="template: { foreach: vendors }"&gt;
      &lt;li&gt;&lt;span data-bind="text: Id"&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>Question:</strong> Why does the successful ajax call, who's <code>data</code> variable value matches byte-for-byte the hard typed value, not trigger the html refresh?</p>