7

新しいEmberルーターでモーダル状態/ビューを処理する正しい方法がわかりません。より一般的には、「メイン」状態（URL）に影響を与えずに出入りできる状態をどのように処理しますか？

たとえば、現在のリーフの状態に関係なく常に使用できる[新しいメッセージ]ボタン。[新しいメッセージ]をクリックすると、URLに影響を与えることなく、現在のビューでモーダルな新しいメッセージが開きます。

現在、私は次のようなアプローチを使用しています。

ルート：

App.Router.map(function() {
   this.route('inbox');
   this.route('archive');
});

App.IndexRoute = Em.Route.extend({
  ...
  events: {
    newMessage: function() {
      this.render('new_message', { into: 'application', outlet: 'modalView' });
    },

    // Clicking 'Save' or 'Cancel' in the new message modal triggers this event to remove the view:
    hideModal: function() {
      // BAD - using private API
      this.router._lookupActiveView('application').disconnectOutlet('modalView');
    }
  }
});

App.InboxRoute = Em.Route.extend({
   ...
   renderTemplate: function(controller, model) {
     // BAD - need to specify the application template, instead of using default implementation
     this.render('inbox', { into: 'application' });
   }
});

App.ArchiveRoute = ... // basically the same as InboxRoute

application.handlebars：

<button {{action newMessage}}>New Message</button>
{{outlet}}
{{outlet modalView}}

簡潔にするために、明らかにいくつかのコードを省略しました。

このアプローチは「機能します」が、上記の2つの問題があります。

  1. プライベートAPIを使用して、hideModalイベントハンドラーのモーダルビューを削除しています。
  2. すべてのサブルートでテンプレートを指定する必要があります。指定applicationしない場合renderTemplate、モーダルを開いて閉じてから受信トレイ間を移動すると、のデフォルトの実装はアプリケーションではなくモーダルのテンプレートにレンダリングしようとします。およびアーカイブ状態（モーダルのテンプレートがlastRenderedTemplateIndexRouteのになっているため）。

明らかに、これらの問題はどちらも取引を妨げるものではありませんが、私が見逃しているより良いアプローチがあるかどうか、またはこれが現在のルーターAPIの単なるギャップであるかどうかを知ることは素晴らしいことです。

4

2 に答える 2

4

同じことを行いますが、プライベート API にはアクセスしません。私たちのソリューションがベスト プラクティスであるかどうかはわかりませんが、うまくいきます。

私たちのイベントには、レンダリングする必要があるビューを作成して追加するRootRouteイベントがあります (あなたの と同じ)。newMessage

events: {
    showNewSomething: function(){
        var newSomethingView = app.NewSomethingView.create({
            controller: this.controllerFor('newSomething')
        });
        newSomethingView.append();
    }
}

これにより、モーダル ビューがアプリに追加されます。キャンセルまたは保存時に、ビューを破棄してアプリから再度削除するためnewSomethingViewに呼び出します。this.remove()

繰り返しますが、これはベスト プラクティスとは思えませんが、機能します。誰かがより良い解決策を持っている場合は、これについてコメントしてください。

于 2013-01-15T16:51:17.583 に答える
0

Bootstrap Modal スクリプトを使用しているかどうかはわかりませんが、使用している場合は、この質問に解決策が提案されています。自分自身はまだすべてを把握していませんが、「Ember のベスト プラクティス」に準拠した方法でColorboxを使用できる同様のタイプのソリューションを自分で探しています。

于 2013-04-08T18:19:40.617 に答える