Ember.js：复杂视图布局，什么'；什么是正确的方法？

我们正在开发一个应用程序，允许用户向各种社交媒体发布消息。我们的设计师创建了一系列交互，允许用户使用滑动面板更改应用程序中的各种设置。我已经做了一个快速的屏幕帽来说明：

我的问题是建筑。我不确定是否应该使用视图或控制器（或两者）来存储这些面板将包含的某些方法。下面是面板的HTML。它们当前不在脚本标记或视图中：

<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="panelView">
    <div id="panel-account-settings" class="panel closed">
        {{ partial "panelSettingsView" }}
        {{ partial "panelAnalyticsView" }}
        {{ partial "panelDisconnectView" }}
    </div>
</script>

但当我试图从齿轮图标调用它时，我出错了。这：

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

这不是正确的语法吗

更新3

添加版本信息：

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

---

最佳实践是始终将任何与DOM或UI相关的逻辑放入视图中，并将数据表示形式留给控制器（例如，控制器中对“选定”项的引用是一个常见示例）

您的

Social.accountscocontroller.openPanel

方法具有与DOM相关的逻辑，这完全是一个视图问题。一个好的开始是将该逻辑移到视图中（

Social.SettingsView

？）

如果您了解到目前为止的情况，那么理解您的目标和提供更多建议会更容易一些

---

编辑：另一个好的实践是将事物分解成非常小的对象。因此，您可以探索使用

selectedAccount

ObjectController，其内容是当前选择的帐户（以及相应的视图）

谢尔顿，谢谢你的意见。我添加了更新2，它将openPanel方法移动到视图中。您介意看一下吗？看起来您正试图触发视图类上的事件（而不是实例的实例）。尝试将动作助手中的目标参数更改为“查看”。您使用的是什么版本的Ember？是的，在这种情况下，执行触发的按钮位于帐户模板（AccountsController）中。我要使用的视图是PanelView。这不可能吗？我已经在更新3中添加了版本信息。您不应该像这样引用PanelView（因为它是一个类，而不是已创建的实际实例）。在panelView模板中，您应该能够将openPanel操作目标设置为

视图

（您的panelView实例）。为了更好地理解余烬之路，我还需要进行一次额外的研究。：）谢尔顿。首先，感谢您的时间和精力……非常感谢。带有操作助手的按钮不包含在PanelView中，它包含在帐户模板中。据我所知，如果我说

target=“view”

它将尝试调用AccountsView上的

openPanel

，然后继续冒泡到路由器。我的应用程序目前不是这样设置的。当然，这可能是个问题，但对我来说是有意义的。这并不能完全回答您的问题，但您操作的目标需要是view类的实例。类似于

{{action openPanel target=“view”}}

Mehul。问题是帐户的控制器与面板视图无关。也许这是我的问题的一部分。我只是不认为它们有关联。不过，我在这方面取得了成功：

。问题是openPanel方法在控制器上，我认为它应该在视图上。

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

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