javascript Ember 过渡和渲染完成事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17437016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ember transition & rendering complete event
提问by Kingpin2k
Is there any event fired stating the transition/rendering has completed (and the dom is visible/ready).
是否触发了任何事件，说明转换/渲染已完成（并且 dom 可见/准备就绪）。
setupcontroller/activate are before the dom is built/rendered
setupcontroller/activate 是在构建/渲染 dom 之前
didInsertElement gets fired only the first time when I've already inserted an element and I'm just switching the model out underneath it.
didInsertElement 只有在我已经插入一个元素并且我只是将模型切换到它下面的第一次时才会被触发。
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.
更酷的是对转换完成的路由的回调，我可能不得不写这个并提交拉取请求。
回答by Kingpin2k
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.
这在第一次插入视图时被触发，但如果模型在视图下被切换出则不会被触发（因为 Ember 喜欢重用项目，因为它比重建整个 DOM 便宜）。下面举例。
Simple
简单的
If you only need to do it once, the first time the view is inserted, use didInsertElement
如果你只需要做一次，第一次插入视图时，使用 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
示例：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 scheduleand insert it into the afterRenderqueue.
如果您需要在从路由本身渲染 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
});
}
});
Example: http://emberjs.jsbin.com/wuxemo/2/edit
示例：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:
如果你想连接到 transition 事件，你可以这样做：
var self = this;
transitionTo('foo').then(function(){
Ember.run.schedule('afterRender', self, function () {
//Do it here
});
})
回答by Rocky
The afterModelhook might work for you:
该afterModel挂钩可能会为你工作：
App.MyRoute = Ember.Route.extend({
afterModel: function(model, transition) {
transition.then(function() {
// Done transitioning
});
}
});
I tested this using RC-7 with routes that both do and don't have dynamic segments (i.e., a route with a model and a route without a model). It seems to work either way.
我使用 RC-7 和具有和不具有动态段的路由（即，具有模型的路由和没有模型的路由）对此进行了测试。它似乎以任何一种方式工作。
See this JSBin for an RC-6 example:
Output: http://jsbin.com/OteC/1/
Source: http://jsbin.com/OteC/1/edit?html,js
有关 RC-6 示例，请参阅此 JSBin：
输出：http: //jsbin.com/OteC/1/
来源：http: //jsbin.com/OteC/1/edit?html, js
回答by Darshan Sawardekar
setupControlleris the last thing that the Router calls before finalizing the transition. And if it completes without errors, as far as Ember is concerned the transition is complete. You actually see this in action by enabling LOG_TRANSITIONS_INTERNAL.
setupController是路由器在完成转换之前调用的最后一件事。如果它没有错误地完成，就 Ember 而言，过渡就完成了。您实际上可以通过启用LOG_TRANSITIONS_INTERNAL.
At that point, It doesn't matter if the controller has thrown an error, view has thrown an error, etc. The router has completed transitioning into the target route.
此时，控制器是否抛出错误、视图是否抛出错误等都没有关系。路由器已完成过渡到目标路由。
So setupControlleris the last place in terms of the Router that corresponds to didTransition.
因此，setupController在对应于路由器方面的最后的地方didTransition。
When the content/model backing the controller changes on an existing View, the bindings kick in. Most of the changes that happen to the view at that point are via Metamorphing.
当支持控制器的内容/模型在现有视图上发生更改时，绑定就会启动。此时发生在视图上的大多数更改都是通过 Metamorphing 进行的。
The closest place I can think of to hook into would be View.renderwhich pushes changes into the RenderBuffer. But you still need to account for Metamorphing via mixins that happens here.
我能想到的最接近的地方是View.render将更改推送到RenderBuffer. 但是您仍然需要通过此处发生的混合来解释 Metamorphing。
回答by Gabe Rainbow
didTransition does exist as you hoped -- but its an action and not a hook
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'),
