2

私の認証システムはライトボックスを使用しているため、ユーザーが「サインイン」または「サインアップ」をクリックすると、資格情報を入力するためのライトボックスがポップアップします。表示されていたページはライトボックスの背後にレンダリングされたままになり、サインインが完了すると、ライトボックスが消え、ビューが元の状態に戻ります。多くの Jquery を使用して、従来の Ember ルート フローから逸脱した場合にこれを機能させることができますが、これを Ember アプリの残りの部分により緊密に統合したいと考えています。

問題は、従来の Ember ルート フローでは、ビューとテンプレートが特定の方法で処理されることを想定していることです。具体的には、 のようなルートは、テンプレート内のテンプレート/sign-inをレンダリングし、以前にあったものをすべて消去します。以前のビューを保持したいので、このアプローチは機能しません。sign-inapplication

現在のビューを消去するのではなく、ライトボックスなどの独立したビューをレンダリングするように Ember ビューに指示する方法はありますか?

4

1 に答える 1

3

名前付きアウトレットを使用して、テンプレートをアウトレットにレンダリングできます。私のアプリケーション テンプレートには、モーダルと呼ばれるアウトレットがあり、ApplicationRoute には openModal と closeModal という 2 つのアクションがあります。開いているものはテンプレート名を受け取り、ルート メソッド render を使用してアウトレット コンテンツを設定し、閉じるものは空のテンプレートをレンダリングします。

App.ApplicationRoute = Ember.Route.extend({
    actions: {
        openModal: function(modal) {
            this.render(modal, {into:'application', outlet: 'modal'});
        },
        closeModal: function() {
            this.render('empty', {into: 'application', outlet: 'modal'});
        },
    }
});

HTMLハンドルバー

<script type="text/x-handlebars" data-template-name="application">
{{! Other application template code}}
<button {{action openModal 'hellow.modal'}}>Open it!</button>
{{outlet modal}}

</script>
<script type="text/x-handlebars" data-template-name="empty"></script>
<script type="text/x-handlebars" data-template-name="hellow/modal">
<div class="modal">
    <div class="modal-header">
      Hellow
    </div>
    <div class="modal-footer">
      <button {{action closeModal}}>Close</button>
    </div>
</div>
</script>

これはhttp://nerdyworm.com/blog/2013/04/20/ember-modal-example/から改作されています

于 2013-10-07T13:39:18.660 に答える