title: Handle two independent content containers on same page
body: <p>I am using ember.js to develop a single page app. I have a dashboard with two different content sections which are independent of each other (so it is not a master/detail relationship). </p>
  
  <p>The structure is like this (using Haml):</p>
  
  <pre><code>#dashboard
    #top
      %nav
      .content
    #bottom
      %nav
      .content
  </code></pre>
  
  <p>In both #top and #bottom there is a little navigation which changes the content of #top and #bottom independently. What is the ember way to</p>
  
  <ol>
  <li>Load the initial state of the dashboard (with default content for #top and #bottom)</li>
  <li>Load new content for #top or #bottom using the corresponding navigation. Loading new content into #top should not change or remove content already present in #bottom and vice versa.</li>
  </ol>
  
  <p>I am still learning ember.js. I hope this question makes sense. </p>