Ember.js: Complex view layout, what's the proper approach?

Question

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:

http://screencast.com/t/tDlyMud7Yb7e

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:

<div id="panel-account-settings" class="panel closed">
    <div class="panel-inner">
        <a href="#" class="button button-close"><i class="icon-cancel"></i>close</a>
        <h3>Account Settings</h3>
        <a href="#" class="button primary button-ga">Google Analytics</a>
        <a href="#" class="button primary button-link-shortening">Link Shortening</a>
        <a href="/accounts/social/connections/" class="button button-disconnect">Disconnect Account</a>
    </div>
    <div id="panel-google-analytics" class="panel-inner">
        <a href="#" class="button button-back"><i class="icon-arrow-right"></i>back</a>
        <h3>Google Analytics</h3>
        <div class="toggle">
            <label>Off</label>
        </div>
        <p>We <strong>won't</strong> append stuff to your links, so they <strong>won't</strong> be trackable in your Google Analytics account.</p>
        <img src="{{ STATIC_URL }}images/ga-addressbar.png" />
    </div>
    <div id="panel-disconnect" class="panel-inner">
        <a href="#" class="button button-back"><i class="icon-arrow-right"></i>back</a>
        <h3>Disconnect This Account</h3>
        <p>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?</p>
        <div class="button-group">
            <a href="#" class="button button-disconnect">Disconnect</a>
        </div>
    </div>
</div>

The gear icon shown in the video is contained with the accounts template

<script type="text/x-handlebars" data-template-name="accounts">
    {{#each account in controller}}
        <div class="avatar-name">
            <p>{{account.name}}</p>
            <p>@{{account.username}}</p>
            <i class="icon-cog" {{action "openPanel" Social.SettingsView account }}></i>
        </div>
    {{/each}}
</script>

which has a bare bones controller

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");
    }
});

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:

<script type="text/x-handlebars" data-template-name="panelView">
    <div id="panel-account-settings" class="panel closed">
        {{ partial "panelSettingsView" }}
        {{ partial "panelAnalyticsView" }}
        {{ partial "panelDisconnectView" }}
    </div>
</script>

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.

UPDATE 1

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.

UPDATE 2

I tried creating a PanelView which would contain the logic on which panels to load:

Social.PanelView = Ember.View.extend({
    tagName: 'div',
    classNames: ['panel-inner'],
    openPanel: function(view,account){
        console.log(view,account);
    }
});

But when I tried to call it from the gear icon I got an error. This:

<i class="icon-cog" {{action openPanel target="Social.PanelView" }}></i>

Threw this error:

Uncaught Error: assertion failed: The action 'openPanel' did not exist on Social.PanelView

Isn't that the correct syntax?

UPDATE 3

Adding version information:

DEBUG: Ember.VERSION : 1.0.0-rc.1
DEBUG: Handlebars.VERSION : 1.0.0-rc.3
DEBUG: jQuery.VERSION : 1.9.1 

Answer 1

The best practice is to always put any DOM- or UI-related logic into your view, and leave data representation to the controller (i.e., a reference to a 'selected' item in the controller is a common example).

Your Social.AccountsController.openPanel method has logic that touches the DOM, which is entirely a view concern. A good start would be to move that logic into the view (Social. SettingsView ?).

It'd be a bit easier to understand your goals and offer more suggestions if you had a jsfiddle of what you have so far.

EDIT: Another good practice is to decompose things into very small objects. So you could explore having a selectedAccount ObjectController whose content is the currently chosen Account (and a corresponding View for it).