Question

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

setupcontroller / activate在构建/呈现dom之前

didInsertElement仅在我第一次插入元素时被触发，而我只是在它下面切换模型。

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

我想我可以做到这一点，但我有点希望它已经内置......

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

甚至更酷的是对转换完成的路线的回调，我可能必须写这个并提交拉取请求。

Answer 1

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

didInsertElement

第一次插入视图时触发此操作，但如果在视图下切换模型则不会触发（因为Ember喜欢重用项目，因为它比重建整个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
    });
})

Answer 2

afterModel挂钩可能适合您：

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

我使用RC-7对路径进行了测试，这些路线既有动态段也有动态段（即带有模型的路径和没有模型的路径）。它似乎无论如何都有效。

请参阅此JSBin以获取RC-6示例：
输出：http://jsbin.com/OteC/1/
资料来源：http://jsbin.com/OteC/1/edit?html,js

Answer 3

setupController是路由器在完成转换之前调用的最后一件事。如果它完成没有错误，就Ember而言，转换已经完成。实际上，您可以通过启用LOG_TRANSITIONS_INTERNAL来查看此操作。

此时，控制器是否抛出错误，视图是否抛出错误等无关紧要。路由器已完成转换到目标路径。

所以setupController是路由器中与didTransition对应的最后一个位置。

当支持控制器的内容/模型在现有视图上发生更改时，绑定会启动。此时视图中发生的大多数更改都是通过变形。

我能想到的最接近的地方是View.render，它会将更改推送到RenderBuffer。但是你仍然需要通过这里发生的混合来解释变形。

Answer 4

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

Ember过渡＆amp;渲染完整的事件

4 个答案:

didInsertElement

简单

复合

过渡承诺