21

是否有任何事件触发说明过渡/渲染已完成（并且 dom 可见/准备就绪）。

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

didInsertElement 仅在我已经插入一个元素并且我只是在它下面切换模型时才第一次被触发。

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

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

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

更酷的是回调为它完成过渡的路线，我可能必须写这个并提交一个拉取请求。

4

4 回答 4

30

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

插入元素

这在第一次插入视图时触发，但如果在视图下切换模型则不会触发（因为 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
    });
})
于 2013-08-22T15:48:44.723 回答
12

afterModel钩子可能对你有用：

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

我使用 RC-7 对有和没有动态段的路线（即有模型的路线和没有模型的路线）进行了测试。无论哪种方式，它似乎都有效。

有关 RC-6 示例，请参阅此 JSBin：
  输出：http: //jsbin.com/OteC/1/
  来源： http: //jsbin.com/OteC/1/edit ?html,js

于 2013-08-21T00:30:47.793 回答
3

setupController是路由器在完成转换之前调用的最后一件事。如果它没有错误地完成，就 Ember 而言，过渡就完成了。您实际上可以通过启用LOG_TRANSITIONS_INTERNAL.

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

setupController就对应于 的路由器而言，最后一个位置也是如此didTransition。

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

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

于 2013-07-03T06:27:43.367 回答
1

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'),
于 2015-04-07T06:23:45.683 回答