3

ユーザーがさまざまなソーシャル メディア アウトレットにメッセージを投稿できるアプリを構築しています。当社のデザイナーは、ユーザーがスライド パネルを使用してアプリケーションのさまざまな設定を変更できるようにする一連のインタラクションを作成しました。説明するために簡単なスクリーン キャプチャを作成しました。

http://screencast.com/t/tDlyMud7Yb7e

私が持っている質問は、アーキテクチャの 1 つです。これらのパネルに含まれるメソッドの一部を保存するために、ビューまたはコントローラー (またはその両方) を使用する必要があるかどうかはわかりません。パネルの 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");
    }
});

ルートとモデルだけでなく。私が達成しようとしているインタラクションを考えると、私の質問は、ピースやパーツをどこに置くべきかということです。少なくとも、変更を適用するアカウントを把握できるように、現在のアカウント モデルを渡す必要があります。他のビューを含む 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？）に移動することです。

あなたがこれまでに持っているもののjsfiddleを持っていれば、あなたの目標を理解し、より多くの提案を提供するのは少し簡単でしょう。

編集：別の良い習慣は、物事を非常に小さなオブジェクトに分解することです。selectedAccountしたがって、コンテンツが現在選択されているアカウント（およびそれに対応するビュー）であるObjectControllerを使用することを検討できます。

于 2013-03-06T20:31:52.247 に答える