3

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

http://screencast.com/t/tDlyMud7Yb7e

我的问题是建筑学之一。我不确定是否应该使用视图或控制器（或两者）来存储这些面板将包含的一些方法。这是面板的 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="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>

它有一个简单的控制器

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

以及路线和模型。考虑到我想要完成的交互，我的问题是我应该把零件和零件放在哪里？至少我需要传入当前的 Account 模型，以便我知道我将应用更改到哪个帐户。我考虑过创建一个包含另一个视图的 mainPanel 视图......像这样：

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

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

更新 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
4

1 回答 1

2

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

您的Social.AccountsController.openPanel方法具有涉及 DOM 的逻辑，这完全是一个视图问题。一个好的开始是将逻辑移到视图中（Social. SettingsView？）。

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

编辑：另一个好的做法是将事物分解成非常小的对象。因此，您可以探索拥有一个selectedAccountObjectController，其内容是当前选择的 Account（及其对应的 View）。

于 2013-03-06T20:31:52.247 回答