灰燼過渡和渲染完成事件

Question

是否有任何事件說明轉換/渲染已完成（並且dom可見/就緒）。

setupcontroller / activate在構建/渲染dom之前

didInsertElement僅在我已經插入元素並且僅在其下切換模型時才被觸發。

我真正想要的是過渡完成事件

我想我可以做到，但我有點希望它已經內置...

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

甚至更酷的是對過渡完成的路由的回調，我可能必須編寫並提交拉取請求。

Answer 1

有兩種不同的方法可以解決此問題

didInsertElement

第一次插入視圖時將觸發此操作，但如果在視圖下切換模型則不會觸發此操作（因為Ember喜歡重用項目，因為它比重建整個DOM便宜）。 下面的例子。

簡單

如果只需要執行一次，則在第一次插入視圖時，請使用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

過渡承諾

過渡的承諾將在完成渲染項目之前完成。 但這為您提供了獲取所有模型和控制器並將其連接起來的機會。

如果您想轉場事件，可以這樣做：

var self = this;
transitionTo('foo').then(function(){
    Ember.run.schedule('afterRender', self, function () {
          //Do it here
    });
})

Answer 2

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

Answer 3

setupController是路由器在完成過渡之前調用的最后一件事。 並且如果它順利完成，就Ember而言，過渡已經完成。 您實際上通過啟用LOG_TRANSITIONS_INTERNAL看到了這LOG_TRANSITIONS_INTERNAL 。

此時，控制器是否拋出錯誤，視圖是否拋出錯誤等都無關緊要。路由器已完成向目標路由的轉換。

所以setupController是路由器上與didTransition相對應的最后一個位置。

當支持控制器的內容/模型在現有View上更改時，綁定就會生效。此時，視圖上發生的大多數更改都是通過Metamorphing實現的。

我能想到的最接近的位置是View.render ，它將更改推送到RenderBuffer 。 但是您仍然需要通過此處發生的mixin來考慮“變形”。

Answer 4

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'),