Javascript 余烬过渡&;呈现完整事件
是否触发了任何事件,说明转换/呈现已完成(并且dom可见/准备就绪) setupcontroller/activate在生成/呈现dom之前 didInsertElement只有在我已经插入了一个元素并且我只是在它下面切换模型时才会被触发 我真正想要的是过渡是一个完整的事件 我想我能做到,但我有点希望它已经建成了Javascript 余烬过渡&;呈现完整事件,javascript,ember.js,promise,transitions,Javascript,Ember.js,Promise,Transitions,是否触发了任何事件,说明转换/呈现已完成(并且dom可见/准备就绪) setupcontroller/activate在生成/呈现dom之前 didInsertElement只有在我已经插入了一个元素并且我只是在它下面切换模型时才会被触发 我真正想要的是过渡是一个完整的事件 我想我能做到,但我有点希望它已经建成了 Ember.Router.reopen({ didTransition:function(infos) { this._super(infos); consol
Ember.Router.reopen({
didTransition:function(infos) {
this._super(infos);
console.log('transition complete');
}
});
更酷的是,对转换完成的路由的回调,我可能不得不写下它并提交一个请求。
setupController
是路由器在完成转换之前调用的最后一件事。如果它没有错误地完成,就余烬而言,转换就完成了。实际上,通过启用LOG\u TRANSITIONS\u INTERNAL
,您可以看到这一点
此时,控制器是否抛出错误、视图是否抛出错误等都无关紧要。路由器已完成向目标路由的转换
因此,setupController
是与didTransition
相对应的路由器的最后一个位置
当支持控制器的内容/模型在现有视图上发生更改时,绑定开始生效。此时视图发生的大多数更改都是通过变形实现的
我能想到的最接近的地方是
View.render
,它将更改推送到RenderBuffer
。但您仍然需要考虑通过此处发生的混合变形。afterModel钩子可能适合您:
App.MyRoute = Ember.Route.extend({
afterModel: function(model, transition) {
transition.then(function() {
// Done transitioning
});
}
});
我使用RC-7对具有和不具有动态段的路线(即,具有模型的路线和不具有模型的路线)进行了测试。这两种方法似乎都管用
有关RC-6示例,请参见此JSBin:输出:
来源:有几种不同的方法可以解决这个问题 双插入元件 第一次插入视图时会触发此命令,但在视图下关闭模型时不会触发此命令(因为Ember喜欢重用项,因为它比重建整个DOM便宜)。下面的例子 简单的 如果第一次插入视图时只需要执行一次,请使用
didInsertElement
App.FooView = Em.View.extend({
setupSomething: function(){
console.log('the dom is in place, manipulate');
}.on('didInsertElement')
});
例如:
复杂的
如果需要在从路由本身渲染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
});
}
});
例如:
过渡承诺
转换承诺将在完成项目渲染之前完成。但它为您提供了一个钩子,用于获取所有模型和控制器并将它们连接起来
如果要连接到转换事件,可以这样做:
var self = this;
transitionTo('foo').then(function(){
Ember.run.schedule('afterRender', self, function () {
//Do it here
});
})
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'),
看看这个要点,RC6中已经描述了这些变化是的,我确实看到了。这有一定的帮助,唯一的问题是我可以在转换后运行代码,但在将代码插入dom后仍然无法运行。这一承诺对于知道转换已经完成是非常好的。非常适合在视图中调用控制器属性,并且知道您拥有正确的模型。谢谢,这正是我所需要的。在Ember 1.7.0中工作得很好。我现在可以吻你了。我的afterModel正在对父控制器进行模型更改,但模板没有更新新数据。我将更改移到了过渡。然后一切都好了。就我所见,在最新的余烬中不起作用。如果在afterModel()中,您尝试访问路由器模板中的DOM元素,但该元素不存在。fyi:将匿名函数传递到
scheduleOnce
不会将其调度为“一次”,因为它正在检查函数引用以查看是否已调度。您需要在静态的地方(比如对象上)定义函数:Ember.run.scheduleOnce('afterRender',this,this.myStaticFunction)
是的,很好,在我写这篇文章的时候,我没有意识到这一点,并且在回答中没有做足够的清理。很棒的一点,更新后不会给人错误的印象。对于去盎司和节流(经常被误解)来说也是如此。组件可以监听renderComplete事件吗?为了学究气,我要说“setupController
是路由器在完成转换后调用的第一件事”,尽管我想这取决于您为单词指定的精确语义“最后确定”。