Ember转换和渲染完成事件

是否有任何事件发生,说明过渡/渲染已经完成(并且DOM是可见的/准备好的)。

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

didInsertElement只有在我已经插入一个元素的时候才会被触发,而我只是将模型切换到其下面。

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

我想我可以做到这一点,但我希望它已经build成了…

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

更酷的将是一个过渡完成的路线的callback,我可能不得不写这个,并提交拉请求。

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

didInsertElement

这是在第一次插入视图时触发的,但是如果模型在视图下被切换,则不会被触发(因为Ember喜欢重用项目,因为它比重build整个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 }); }) 

afterModel钩子可能适合你:

 App.MyRoute = Ember.Route.extend({ afterModel: function(model, transition) { transition.then(function() { // Done transitioning }); } }); 

我testing了使用RC-7的路线,这两条路线都没有dynamic路段(即一条路线和一个没有模型的路线)。 这似乎工作方式。

看到这个JSBin RC-6的例子:
输出: http : //jsbin.com/OteC/1/
来源: http : //jsbin.com/OteC/1/edit?html,js

在完成转换之前, setupController是路由器调用的最后一个东西。 如果完成没有错误,就Ember而言,过渡是完整的。 您实际上通过启用LOG_TRANSITIONS_INTERNAL看到这LOG_TRANSITIONS_INTERNAL

此时,控制器是否抛出错误,视图是否发生错误等都无关紧要。路由器已经完成了到目标路由的转换。

所以setupController是路由器对应于didTransition的最后一个地方。

当支持控制器的内容/模型在现有的View上发生变化时,绑定就会启动。此时发生在视图上的大部分更改都是通过Metamorphing进行的。

我能想到的最接近的位置是View.render ,它将更改推送到RenderBuffer 。 但是你仍然需要通过这里发生的mixin来解释Metamorphing。

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