title: Trying to understand why binding to a nested viewmodel fails
body: <p>I have two ViewModels (although I like to think of the 'Person' ViewModel as the Model):</p>
  
  <pre><code>function Person() {
      var self = this;
      self.firstName = ko.observable("");
      self.lastName = ko.observable("");
  }
  
  
  function AppViewModel() {
      var self = this;
      self.admin = ko.observable(null);
      self.something = ko.observable("Hello World");
  }
  </code></pre>
  
  <p>And then I set AppViewModel.admin to an instance of Person:</p>
  
  <pre><code>var viewModel = new AppViewModel();
  
  var bob = new Person();
  bob.firstName("Sponge");
  bob.lastName("Bob");
  viewModel.admin(bob);
  
  ko.applyBindings(viewModel);
  </code></pre>
  
  <p>I then try to bind to it like this:</p>
  
  <pre><code>&lt;p&gt;&lt;strong data-bind="text: admin.firstName"&gt;&lt;/strong&gt;&lt;/p&gt;
  &lt;p&gt;&lt;strong data-bind="text: admin.lastName"&gt;&lt;/strong&gt;&lt;/p&gt;
  &lt;p&gt;&lt;strong data-bind="text: something"&gt;&lt;/strong&gt;&lt;/p&gt;
  </code></pre>
  
  <p>I expected the output of this to be:</p>
  
  <blockquote>
    <p><strong>Sponge</strong><br/>
    <strong>Bob</strong><br/>
    <strong>Hello World</strong></p>
  </blockquote>
  
  <p>However that is not the case, instead the output is simply "Hello World"<br/>
  (Obviously 'something' is just an observable of the AppViewModel, so that part works)</p>
  
  <p>Can someone explain why it doesn't work and what I should be doing instead?</p>
  
  <p>The full example on jsFiddle: <a href="http://fiddle.jshell.net/XRPAH/1/" rel="nofollow">http://fiddle.jshell.net/XRPAH/1/</a></p>