title: Knockout.js - multiple "pages", switching models?
body: <p>Having trouble understanding how to best do the following in Knockout:</p>
  
  <p>I'm porting a multi-page server-side app to Knockout, which does a lot of different functionality and data on various pages, for example:</p>
  
  <ul>
  <li>List all users</li>
  <li>View a user page</li>
  <li>Edit a user page</li>
  <li>Your account settings</li>
  <li>etc.</li>
  </ul>
  
  <p>These various pages are shown in the main part of each page, with a common header, sidebar, and footer.</p>
  
  <p>There is common data on all pages (in header and sidebar), and I'd like this to behave like a 'single page' app (with animations between sections, etc)</p>
  
  <p>Pending your feedback, I'm thinking the best approach would be to have:</p>
  
  <ul>
  <li>One main model, with submodels for each 'page'</li>
  <li>Common observables applicable to the header, sidebar, etc</li>
  <li>An observable that indicates the 'active page' and template</li>
  </ul>
  
  <p>For example:</p>
  
  <pre><code>var MainModel = {
     listUsersModel: { ... },
     userModel: { ... },
     accountModel: { ... },
     commonProperty: ko.observable('Blah'),
     anotherCommonProperty: ko.observable('Blah'),
     activeSection: ko.observable('listUsers')
  </code></pre>
  
  <p>}</p>
  
  <p>While I think this will work, I'm a little fuzzy about how to "switch pages", and update new page's model with fresh server-side data.</p>
  
  <p>Is the best/only way to do this something like:</p>
  
  <pre><code>MainModel.userModel.userId(123456)
  // userModel above subscribes to userId changes, to get new server via ajax
  MainModel.activeSection = 'viewUser'
  </code></pre>
  
  <p>?</p>