1

私のアプリケーションでは、次のようなアカウントのリストを表示します。

<script type="text/x-handlebars" data-template-name="accounts">
{{#each account in controller}}
    {{#linkTo "account" account class="item-account"}}
        <div>
            <p>{{account.name}}</p>
            <p>@{{account.username}}</p>
            <i class="settings" {{ action "openPanel" account }}></i>
        </div>
    {{/linkTo}}
{{/each}}
</script>

各アカウントには、ユーザーがそのアカウント専用の設定を含む設定パネルを開くことができるボタンがあります。このクイックスクリーンキャストでわかるように、次のようになります。

http://screencast.com/t/tDlyMud7Yb7e

私は現在、AccountsController：にあるメソッド内からパネルのオープンをトリガーしています。

Social.AccountsController = Ember.ArrayController.extend({
    openPanel: function(account){
        console.log('trigger the panel');
    }
});

しかし、この目的のために定義したビュー内からパネルを開く方が適切だと思います。これにより、ビューにアクセスできるようになり、ビューに含まれるDOMを操作できるようになります。

Social.MainPanelView = Ember.View.extend({
    id: 'panel-account-settings',
    classNames: ['panel', 'closed'],
    templateName: 'mainPanel',
    openPanel: function(){
        console.log('opening the panel');
    }
});

<script type="text/x-handlebars" data-template-name="mainPanel">
    <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="/accounts/social/connections/" class="button button-disconnect">Disconnect Account</a>
        </div>
    </div>
</script>

Social.MainPanelView私が直面している問題は、のコンテキストからでメソッドをトリガーする方法がわからないことAccountsControllerです。より良い解決策はありますか？

更新1

私が話していることを説明するためにフィドルを作成しました：

http://jsfiddle.net/UCN6m/

ボタンをクリックすると、にあるshowPanelメソッドが呼び出されることがわかりますApp.IndexController。しかし、代わりににあるshowPanelメソッドを呼び出せるようにしたいと思いますApp.SomeView。

4

2 に答える 2

1

リンクを直接コーディングするのではなく、アクションヘルパーを使用する必要があります。アクションヘルパーはデフォルトでコントローラーをターゲットにしますが、代わりにビューをターゲットにするように変更できます。

<a {{action openPanel target="view"}}></a>

別のリソースへのリンクを指定しているため、2番目のリンクはルートへのリンクである必要があります。スニペット全体、改訂：

Social.MainPanelView = Ember.View.extend({
    id: 'panel-account-settings',
    classNames: ['panel', 'closed'],
    templateName: 'mainPanel',
    openPanel: function(){
        console.log('opening the panel');
    }
});

<script type="text/x-handlebars" data-template-name="mainPanel">
    <div id="panel-account-settings" class="panel closed">
        <div class="panel-inner">
            <a {{action openPanel target="view"} class="button button-close"><i class="icon-cancel"></a></i>
            <h3>Account Settings</h3>
            {{#linkTo "connections"}}Disconnect Account{{/linkTo}}
        </div>
    </div>
</script>
于 2013-03-11T19:33:06.880 に答える
1

アップデート：

アプローチ1：

すべての中で最も単純

Social.AccountsController = Ember.ArrayController.extend({
  openPanel: function(account){
    /* we can get the instance of a view, given it's id using Ember.View.views Hash
       once we get the view instance we can call the required method as follows
    */
    Ember.View.views['panel-account-settings'].openPanel();
  }
});

フィドル

アプローチ2:(コントローラーの関連付け、はるかにクリーン）

ハンドルバーrenderヘルパーの使用：このヘルパーが行うことは、コントローラーを表示するビューに関連付けて、このコントローラーのビューに関連するすべてのロジックを処理できるようにすることです。違いは次のとおりです。

 {{partial "myPartial"}}

ビューをレンダリングするだけですが

{{render "myPartial"}}

App.MyPartialControllerビューのレンダリングに加えて、レンダリングされたビューのアソシエート、 Fiddle

これで、次のようにコードを更新できます

application.handlebars（ビューをレンダリングする場所）

{{render "mainPanel"}}

アカウントコントローラー

Social.AccountsController = Ember.ArrayController.extend({
  openPanel: function(account){
    this.controllerFor("mainPanel").openPanel();
  }
});

メインパネルビュー

Social.MainPanelView = Ember.View.extend({
  id: 'panel-account-settings',
  classNames: ['panel', 'closed']
});

メインパネルコントローラー

Social.MainPanelController = Ember.Controller.extend({
  openPanel: function(){
    console.log('opening the panel');
  }
})


アプローチ3： これはアプローチ2を達成するための手動の方法です

Social.MainPanelView = Ember.View.extend({
  id: 'panel-account-settings',
  controllerBinding: 'Social.MainPanelController',
  classNames: ['panel', 'closed'],
  templateName: 'mainPanel'
});

Social.MainPanelController = Ember.Controller.extend({
  openPanel: function(){
    console.log('opening the panel');
  }
})

使用するthis.controllerFor("mainPanel").openPanel()

于 2013-03-12T10:43:50.280 に答える