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