Ember过渡和渲染完成事件

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