javascript - Ember 过渡和渲染完成事件

Question

是否触发了任何事件，表明转换/渲染已完成(并且 dom 可见/就绪)。

setupcontroller/activate 是在 dom 构建/渲染之前

didInsertElement 仅在我第一次插入元素并且只是在其下方切换模型时才会被触发。

我真正想要的是转换完成事件

我想我可以做到这一点，但我有点希望它已经内置......

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

更酷的是对转换完成的路线进行回调，我可能必须编写此内容并提交拉取请求。

Answer 1

有几种不同的方法可以解决这个问题

didInsertElement

第一次插入 View 时会触发此事件，但如果在 View 下切换模型则不会触发此事件(因为 Ember 喜欢重用项目，因为它比重建整个 DOM 更便宜)。下面的例子。

简单

如果您只需要执行一次，即第一次插入 View 时，请使用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

过渡的 promise 将在完成渲染项目之前完成。但是，当完成获取所有模型和 Controller 并将它们连接起来时，它为您提供了一个钩子(Hook)。

如果你想连接到转换事件，你可以这样做:

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