ember.js – Ember是否应该在link-to / transitionTo上触发所有父路由挂钩？

2023年1月7日 226次阅读

我很难理解Ember路由器在链接到转换期间如何调用嵌套资源上的挂钩.此示例中没有涉及动态细分.

这是一个模仿我的应用程序的人为例子：

App.Router.map(function() {
  //Modal resources
  this.resource('modal', function(){

    this.resource('posts', function(){
      this.route('new');
      this.route('edit')
    });

    this.resource('photos', function(){
      this.route('new');
      this.route('edit');
    });
})

在帖子路由的完整页面RELOAD上,让我们说,我们看到beforeModel和afterModel挂钩Application>索引>模态路由按顺序触发.好,有道理.

Attempting URL transition to /modal/posts ember.js?body=1:3912
Transition #0: application: calling beforeModel hook ember.js?body=1:3912
Transition #0: application: calling deserialize hook ember.js?body=1:3912
Transition #0: application: calling afterModel hook ember.js?body=1:3912
Transition #0: modal: calling beforeModel hook ember.js?body=1:3912
Transition #0: modal: calling deserialize hook ember.js?body=1:3912
Transition #0: modal: calling afterModel hook ember.js?body=1:3912
Transition #0: posts: calling beforeModel hook ember.js?body=1:3912
Transition #0: posts: calling deserialize hook ember.js?body=1:3912
Transition #0: posts: calling afterModel hook ember.js?body=1:3912
Transitioned into 'posts' ember.js?body=1:3912
Transition #0: TRANSITION COMPLETE.

但是,当我点击

{{link-to 'Go to Photos' 'photos'}}

在使用modal.hbs模板或posts.hbs模板时,它不会通过Application>级联.索引>模态挂钩序列.它只击中最极端的儿童叶钩：

Attempting transition to photos ember.js?body=1:3912
Transition #1: photos: calling beforeModel hook ember.js?body=1:3912
Transition #1: photos: calling deserialize hook ember.js?body=1:3912
Transition #1: photos: calling afterModel hook ember.js?body=1:3912
Transition #1: Resolved all models on destination route; finalizing transition. 
Transitioned into 'photos' ember.js?body=1:3912
Transition #1: TRANSITION COMPLETE.

有些灵魂可以清楚路由器应该如何工作,特别是在链接到转换时？我希望所有父路由的beforeModel / afterModel挂钩按顺序命中.根据我的研究(很多),Ember应该在每次转换之前,在模型/ afterModel挂钩,自上而下之前击中所有父路线.

专门为kingpin2K的回复编辑：
好吧,但是

App.Modal = Ember.Route.extend({

  model: function(params){
    //load some data that you want modal.photos to also have access to
    console.log('Modal route model hit')
  },

  afterModel: function(model) {
    this.transitionTo('modal.photos')
  }
});

导航到它时,调用Modal父路由两次. 1)直接命中Modal url,2)再次onModel重定向(transitionTo modal.photos).根据你的解释,模态父路径挂钩(特别是模型挂钩！)不会在从模态(父)到modal.photos(子)的后续转换中触发,但它们是.当您转到父“模态”路线时,您将获得两个控制台日志.

再次感谢你的帮助.

最佳答案 最简单的方法是将路由器视为堆栈,每个资源/路由都是堆栈中的项目.当您从资源移动到资源时,它会从堆栈中弹出不相关的项目,然后推送尚未获取的新相关项目.

父资源不应该依赖于子资源,或者它实际上不是父资源.考虑到这种范例,在转换到路由器中的新资源/路由时重新获取父模型是没有意义的.

点赞