title: Ember.js: Complex view layout, what's the proper approach?
body: <p>We're building app that allows users to post messages to various social media outlets. Our designer has created a series of interactions which allow users to change various settings in their application by use of sliding panels. I've done a quick screen cap to illustrate:</p>
  
  <p><a href="http://screencast.com/t/tDlyMud7Yb7e" rel="nofollow">http://screencast.com/t/tDlyMud7Yb7e</a></p>
  
  <p>The question I have is one of architecture. I'm not sure whether I should be using a View or a Controller (or both) to store some of the methods these panels will contain. Here's the HTML for the panels. They're not currently in a script tag or view:</p>
  
  <pre><code>&lt;div id="panel-account-settings" class="panel closed"&gt;
      &lt;div class="panel-inner"&gt;
          &lt;a href="#" class="button button-close"&gt;&lt;i class="icon-cancel"&gt;&lt;/i&gt;close&lt;/a&gt;
          &lt;h3&gt;Account Settings&lt;/h3&gt;
          &lt;a href="#" class="button primary button-ga"&gt;Google Analytics&lt;/a&gt;
          &lt;a href="#" class="button primary button-link-shortening"&gt;Link Shortening&lt;/a&gt;
          &lt;a href="/accounts/social/connections/" class="button button-disconnect"&gt;Disconnect Account&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="panel-google-analytics" class="panel-inner"&gt;
          &lt;a href="#" class="button button-back"&gt;&lt;i class="icon-arrow-right"&gt;&lt;/i&gt;back&lt;/a&gt;
          &lt;h3&gt;Google Analytics&lt;/h3&gt;
          &lt;div class="toggle"&gt;
              &lt;label&gt;Off&lt;/label&gt;
          &lt;/div&gt;
          &lt;p&gt;We &lt;strong&gt;won't&lt;/strong&gt; append stuff to your links, so they &lt;strong&gt;won't&lt;/strong&gt; be trackable in your Google Analytics account.&lt;/p&gt;
          &lt;img src="{{ STATIC_URL }}images/ga-addressbar.png" /&gt;
      &lt;/div&gt;
      &lt;div id="panel-disconnect" class="panel-inner"&gt;
          &lt;a href="#" class="button button-back"&gt;&lt;i class="icon-arrow-right"&gt;&lt;/i&gt;back&lt;/a&gt;
          &lt;h3&gt;Disconnect This Account&lt;/h3&gt;
          &lt;p&gt;If you disconnect this account you will lose all the metrics we tracked for each message. Are you absolute sure you want to get rid of them?&lt;/p&gt;
          &lt;div class="button-group"&gt;
              &lt;a href="#" class="button button-disconnect"&gt;Disconnect&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The gear icon shown in the video is contained with the accounts template</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="accounts"&gt;
      {{#each account in controller}}
          &lt;div class="avatar-name"&gt;
              &lt;p&gt;{{account.name}}&lt;/p&gt;
              &lt;p&gt;@{{account.username}}&lt;/p&gt;
              &lt;i class="icon-cog" {{action "openPanel" Social.SettingsView account }}&gt;&lt;/i&gt;
          &lt;/div&gt;
      {{/each}}
  &lt;/script&gt;
  </code></pre>
  
  <p>which has a bare bones controller</p>
  
  <pre><code>Social.AccountsController = Ember.ArrayController.extend({
      openPanel: function(view,account){
          console.log(view,account);
          $(this).parents(".item-account").addClass("active");
          $("#panel-account-settings").prepareTransition().removeClass("closed");
      }
  });
  </code></pre>
  
  <p>as well as a Route and a Model. Given the interaction I'm looking to accomplish, my question is where should I be putting the pieces and parts? At a minimum I need to pass in the current Account model so that I know which account I'll be applying changes to. I thought about creating a mainPanel view which would contain the other view...something like this:</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="panelView"&gt;
      &lt;div id="panel-account-settings" class="panel closed"&gt;
          {{ partial "panelSettingsView" }}
          {{ partial "panelAnalyticsView" }}
          {{ partial "panelDisconnectView" }}
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>and then the action helper on the gear icon could pass in the account AND the required view. But I'm not sure if that's the right approach. I'd appreciate some input or suggestions. Thanks.</p>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>Ideally I'd like to eventually load in the content of each panel via AJAX but that's a want to, not a need to.</p>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>I tried creating a PanelView which would contain the logic on which panels to load:</p>
  
  <pre><code>Social.PanelView = Ember.View.extend({
      tagName: 'div',
      classNames: ['panel-inner'],
      openPanel: function(view,account){
          console.log(view,account);
      }
  });
  </code></pre>
  
  <p>But when I tried to call it from the gear icon I got an error. This:</p>
  
  <pre><code>&lt;i class="icon-cog" {{action openPanel target="Social.PanelView" }}&gt;&lt;/i&gt;
  </code></pre>
  
  <p>Threw this error:</p>
  
  <pre><code>Uncaught Error: assertion failed: The action 'openPanel' did not exist on Social.PanelView
  </code></pre>
  
  <p>Isn't that the correct syntax?</p>
  
  <p><strong>UPDATE 3</strong></p>
  
  <p>Adding version information:</p>
  
  <pre><code>DEBUG: Ember.VERSION : 1.0.0-rc.1
  DEBUG: Handlebars.VERSION : 1.0.0-rc.3
  DEBUG: jQuery.VERSION : 1.9.1 
  </code></pre>