21

トランジション/レンダリングが完了したことを示すイベントが発生しましたか (および DOM が表示/準備完了)。

setupcontroller/activate は、dom が構築/レンダリングされる前です。

didInsertElement は、要素を既に挿入していて、モデルをその下に切り替えているときに初めて起動されます。

私が本当に探しているのは、移行が完了したイベントです

私はこれを行うことができると思いますが、それがすでに組み込まれていることを望んでいました...

Ember.Router.reopen({
  didTransition:function(infos) {
     this._super(infos);
     console.log('transition complete');  
  }
});

さらにクールなのは、トランジションが完了したルートへのコールバックです。これを記述してプル リクエストを送信する必要があるかもしれません。

4

4 に答える 4

30

これを解決するにはいくつかの方法があります

didInsertElement

これは、ビューが初めて挿入されたときに発生しますが、モデルがビューの下に切り替えられた場合は発生しません (DOM 全体を再構築するよりも安価であるため、Ember はアイテムを再利用するのが好きだからです)。以下の例。

単純

一度だけ行う必要がある場合は、ビューが初めて挿入されたときに使用しますdidInsertElement

App.FooView = Em.View.extend({
  setupSomething: function(){
    console.log('the dom is in place, manipulate');
  }.on('didInsertElement')
});

例: http://emberjs.jsbin.com/wuxemo/1/edit

複雑

DOM がルート自体からレンダリングされた後に何かをスケジュールする必要がある場合は、それを使用してキューscheduleに挿入できます。afterRender

App.FooRoute = Em.Route.extend({
  setupController: function(controller, model){
    this._super('controller', model);
    Ember.run.schedule('afterRender', this, function () {
      //Do it here
    });
  }
});

例: http://emberjs.jsbin.com/wuxemo/2/edit

移行の約束

トランジションの promise は、アイテムのレンダリングが完了する前に完了します。しかし、すべてのモデルとコントローラーを取得して接続する作業が完了すると、フックが提供されます。

遷移イベントに接続したい場合は、次のように実行できます。

var self = this;
transitionTo('foo').then(function(){
    Ember.run.schedule('afterRender', self, function () {
          //Do it here
    });
})
于 2013-08-22T15:48:44.723 に答える
12

afterModelフックはあなたのために働くかもしれません:

App.MyRoute = Ember.Route.extend({
  afterModel: function(model, transition) {
    transition.then(function() {
      // Done transitioning
    });
  }
});

RC-7 を使用して、動的セグメントがあるルートとないルート (つまり、モデルのあるルートとモデルのないルート) の両方でこれをテストしました。どちらの方法でも機能するようです。

RC-6 の例については、この JSBin を参照してください。
  出力: http://jsbin.com/OteC/1/
  ソース: http://jsbin.com/OteC/1/edit?html,js

于 2013-08-21T00:30:47.793 に答える
1

didTransition は期待どおりに存在しますが、これはアクションであり、フックではありません

XXRouter
actions: {
    didTransition: function() {
        this.controller.set("hasTransitioned", true); // or whatever is needed?!
        return true; // Bubble the didTransition event
    },
}


XXController    
observeTransition: function() {
    alert('complete Transition');
}.observes('hasTransitioned'),
于 2015-04-07T06:23:45.683 に答える