Ember 过渡 &渲染完成事件 [英] Ember transition & rendering complete event

问题描述

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

Is there any event fired stating the transition/rendering has completed (and the dom is visible/ready).

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

setupcontroller/activate are before the dom is built/rendered

didInsertElement 仅在我第一次插入元素时被触发，而我只是将模型切换到它下面.

didInsertElement gets fired only the first time when I've already inserted an element and I'm just switching the model out underneath it.

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

What I'm really looking for is the transition is complete event

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

I guess I can do this, but I was kind of hoping it was already built in...

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

更酷的是对转换完成的路由的回调，我可能必须写这个并提交拉取请求.

Even cooler would be a callback to the route that the transition completed for it, I may have to write this and submit a pull request.

推荐答案

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

There are a couple of different ways you can solve this

这是在第一次插入视图时触发，但如果模型在视图下被切换出则不会触发(因为 Ember 喜欢重用项目，因为它比重建整个 DOM 更便宜).示例如下.

This is fired when the view is inserted on the first time, but not fired if the model is switched out under the view (because Ember likes to reuse items, since it's cheaper than rebuilding the entire DOM). Example below.

如果只需要做一次，第一次插入视图，使用didInsertElement

If you only need to do it once, the first time the view is inserted, use 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 队列中.

If you need to schedule something after the DOM has been rendered from the route itself, you can use schedule and insert it into the afterRender queue.

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

过渡的承诺将在它完成渲染项目之前完成.但是当它完成获取所有模型和控制器并将它们连接起来时，它会为您提供一个钩子.

The transition's promise will complete before it's finished rendering items. But it gives you a hook for when it's done with fetching all of the models and controllers and hooking them up.

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

If you want to hook up to the transition event you can do it like so:

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

这篇关于Ember 过渡 &渲染完成事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！