琥珀过渡&呈现完整的事件 [英] Ember transition & rendering complete event

问题描述

是否有任何事件触发说明转换/渲染已经完成（并且dom是可见/准备好的）。

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

didInsertElement仅在我已经插入一个元素的第一次被触发，我只是在其下面切换模型。

我真正寻找的是过渡是完成的事件

我想我可以做到这一点，但我很希望已经建立在...

  Ember.Router.reopen（{
 didTransition：function（infos）{
 this._super（infos）; 
 console.log（'transition complete'）; 
} 
}）; 
  

甚至更冷的是对转换完成的路由的回调，我可能要写这个提交请求。

解决方案

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

didInsertElement

当第一次插入视图时触发，但如果模型在视图下被切换，则不会触发（因为Ember喜欢重用项目，因为它比重建整个DOM便宜得多）。

简单

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

  App.FooView = Em.View.extend {
 setupSomething：function（）{
 console.log（'the dom is place，manipulate'）; 
} .on（'didInsertElement'）
}）; 
  

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

复杂

如果您需要在路由本身渲染DOM后安排某些内容，可以使用 schedule 并将其插入到 afterRender queue。

  App.FooRoute = Em.Route.extend（{
 setupController：function （控制器，模型）{
 this._super（'controller'，model）; 
 Ember.run.schedule（'afterRender'，this，function（）{
 //在这里
}）; 
} 
}）; 
  

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

转换承诺

转换的承诺将在完成渲染项目之前完成。但是，当您完成所有的模型和控制器并将其挂起后，它将为您提供帮助。

如果要连接到转换事件，您可以这样做：

  var self = this; 
 transitionTo（'foo'）。then（function（）{
 Ember.run.schedule（'afterRender'，self，function（）{
 // do this here 
 }）; 
}）
  

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

setupcontroller/activate are before the dom is built/rendered

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

didInsertElement

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.

Simple

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')
});

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

Complex

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
    });
  }
});

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

Transition promise

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
    });
})

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