title: Knockout.js: Binding to complex object
body: <p>I'm new to knockout.js and am trying to bind to the following object representing a user:</p>
  
  <pre><code>{
      "$id": "1",
      "$values": [
          {
              "$id": "2",
              "Locations": {
                  "$id": "3",
                  "$values": []
              },
              "Photos": {
                  "$id": "4",
                  "$values": []
              },
              "UserId": 1,
              "Name": "Test User"
          }
      ]
  }
  </code></pre>
  
  <p>A user can zero or more locations, and zero or more photos.</p>
  
  <p>The view model:</p>
  
  <pre><code>function UsersViewModel() {
      var self = this;
      self.users = ko.observableArray();
  
      var baseUri = 'http://localhost:46241/api/users';
  
      $.getJSON(baseUri, function (data) {
          self.users = data;
      });
  }
  
  $(document).ready(function () {
      ko.applyBindings(new UsersViewModel());
  })
  </code></pre>
  
  <p>The HTML contains the following binding:</p>
  
  <pre><code>&lt;ul id="update-users" data-bind="foreach: users"&gt; 
       &lt;li&gt; 
              &lt;div&gt;&lt;div class="item"&gt;User ID&lt;/div&gt;
                  &lt;input type="text" data-bind="value: $data.UserId" /&gt;
              &lt;/div&gt;                 
              &lt;div&gt;&lt;div class="item"&gt;Name&lt;/div&gt;
                  &lt;input type="text" data-bind="value: $data.Name" /&gt;
              &lt;/div&gt;                  
       &lt;/li&gt; 
  &lt;/ul&gt;
  </code></pre>
  
  <p>Am I flat out doing this incorrectly?  Or are user's object references to Locations and Photos possibly messing up the binding? </p>