Ember.js:复杂的 View 布局，正确的方法是什么？

Question

我们正在构建允许用户将消息发布到各种社交媒体的应用程序。我们的设计师创建了一系列交互，允许用户通过使用滑动面板来更改应用程序中的各种设置。我做了一个快速屏幕截图来说明:

http://screencast.com/t/tDlyMud7Yb7e

我的问题是架构问题。我不确定是否应该使用 View 或 Controller (或两者)来存储这些面板将包含的一些方法。这是面板的 HTML。它们当前不在脚本标记或 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>

视频中显示的齿轮图标包含在帐户模板中

<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>

它有一个简单的 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");
    }
});

以及路线和模型。考虑到我希望完成的交互，我的问题是我应该将各个部件放在哪里？至少我需要传递当前的帐户模型，以便我知道我将应用更改到哪个帐户。我考虑过创建一个包含其他 View 的 mainPanel View ...如下所示:

<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>

然后齿轮图标上的操作助手可以传入帐户和所需的 View 。但我不确定这是否是正确的方法。我希望得到一些意见或建议。谢谢。

更新1

理想情况下，我希望最终通过 AJAX 加载每个面板的内容，但这是我想要的，而不是需要。

更新2

我尝试创建一个 PanelView，其中包含要加载的面板的逻辑:

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

但是当我尝试从齿轮图标调用它时，出现错误。这:

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

抛出此错误:

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

这不是正确的语法吗？

更新3

添加版本信息:

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

Answer 1

最佳实践是始终将任何 DOM 或 UI 相关逻辑放入 View 中，并将数据表示留给 Controller (即，对 Controller 中“选定”项目的引用是一个常见的示例)。

您的 Social.AccountsController.openPanel 方法具有涉及 DOM 的逻辑，这完全是一个 View 问题。一个好的开始是将逻辑移至 View 中(Social.SettingsView？)。

如果您对目前所拥有的内容有所了解，那么理解您的目标并提供更多建议会更容易一些。

编辑:另一个好的做法是将事物分解为非常小的对象。因此，您可以探索拥有一个 selectedAccount ObjectController，其内容是当前选择的帐户(及其相应的 View )。