2016-07-03 4 views
0

私はルートを持つモーダルを作る方法を知りたい。EmberjsでTrelloのようなルートを持つモーダルを作る方法

トレントでは、カードをクリックするたびに、ルートがabc.com/b/personalからabc.com/c/some-random-stringに変わり、カードがモーダルで開きます。また、モーダルを閉じると、前のURL(abc.com/b/personal)にリダイレクトされます。

私はEmberjsを使用してこれをどのように達成できるか知りたいと思います。我々はレコードを削除(土台使用して)ここでhttps://trello.com/b/ezWgKsol/sales-enterprise-feature-requests-sample

+0

emberのすべてのサブルートと同じ方法です。開かれたモーダルのためのサブルーチンのためのテンプレートを保持します。閉じるときには、インデックスルート –

+0

に移動するだけです*ウェブ上のモーダル*は通常、あなたのページに灰色の透明な背景がぶら下がっている大きな固定サイズのdivを持つことを意味します。 – Lux

+0

私が望むものの例として、このボード(https://trello.com/b/ezWgKsol/sales-enterprise-feature-requests-sample)を参照してください。 –

答えて

1

は私のモーダルです:

例ルータが行動に落ちている

<div class="reveal" id="deleteLocationModal" data-reveal> 
    <div class="row"> 
     <div class="columns"> 
      Are you sure you want to delete this location? 
     </div> 
    </div> 
    <div class="row"> 
     &nbsp; 
    </div> 
    <div class="row"> 
     <div class="columns"> 
      <button id="cancelButton" class="secondary button" data-close type="button">Cancel</button> 
      <button id="deleteButton" class="button" {{action "deleteLocation" model}} data-close type="button">Delete</button> 
     </div> 
    </div> 
</div> 

はハッシュ:

actions: { 
    deleteLocation(model) { 
     Ember.assert("Params must be provided", model); 
     model.save().then((/* response */) => { 
      this.transitionTo('locations'); //locations is my index page. 
      //flash message to inform the user of success. 
     }); 
    }, (error) => { 
     //handle error. 
     // display flash message 
     // rollback any dirty attributes 

    }); 
} 

をIこれが役に立ったら、

Jeff

+0

これは新しいルートでどのように開きますか? –

+0

保存が行われると、ユーザーはルートに移行します。上の例では、自分のアプリケーションのインデックスページである場所にルーティングします。モーダルが閉じ、ページが更新されます。 – Visualjeff

+0

私は、クリックするとモーダルが新しいルートで開き、モーダルを閉じるとTrelloの動作と同じように以前のルートにリダイレクトされます。次の例を参照してください。https://trello.com/b/ezWgKsol/sales-enterprise-feature-requests-sample。いずれかのカードをクリックします。 –

関連する問題