Ember JS 过渡到嵌套路由,其中​​所有路由都是视图中的动态段

Posted

技术标签:

【中文标题】Ember JS 过渡到嵌套路由,其中​​所有路由都是视图中的动态段【英文标题】:Ember JS transition to nested routes where all routes are dynamic segments from a view 【发布时间】:2013-05-04 19:49:51 【问题描述】:

我们正在使用 EmberJS 编写一个应用程序。然而,我们仍然是这个框架的新手,我们很难解决一些看似简单的问题。

模型很简单,有 3 个模型:Queue、Task 和 Image。我们对所有路由使用动态 URI 段,并且这些模型的路由嵌套在以下格式中::queue_id/:task_id/:image_id。

路由是这样配置的:

App.Router.map(function() 
   this.resource('queue', path: ':queue_id', function() 
      this.resource('task', path: ':task_id', function() 
         this.resource('image', path: ':image_id');
      );
   );

html 的某个地方,我们有一个简单的模板来遍历任务中的所有图像:

#each task.images
   <li>
      #view App.ThumbnailView.contentBinding="this"
         <img bindAttr src="thumbnail.url" />
      /view
   </li>
/each

这是缩略图视图的代码:

App.ThumbnailView = Ember.View.extend(
   tagName : 'a',
   click : function(e) 
       var task = //assume this value exists;
       var queue = //assume this value exists;
       var image = //assume this value exists;

       this.get('controller.target.router').transitionTo('image', queue, task, image);
   
);

最后,这是我们的 ImageRoute:

App.Image = Ember.Object.extend();
App.Image.reopenClass(
    find : function(image_id) 
       //This is where I set a breakpoint
       console.log(image_id);
    
);

App.ImageRoute = Ember.Route.extend(
    model : function(params) 
      //image_id is the last uri segment in: #/1/1/1
      return App.Image.find(params.image_id);
    
);

问题:this.get('controller.target.router').transitionTo() 的调用似乎有效。我可以看到,当我单击其中一个缩略图视图时,URL 会发生变化(例如,从 /1/1/2 变为 /1/1/3 之类的东西)。但是,我没有在 UI 中看到任何状态变化。此外,我放置断点的行似乎没有被触发。但是当我刷新页面时,它运行良好。

我的转换代码有问题吗?

谢谢。

【问题讨论】:

【参考方案1】:

需要注意的两点:

首先,而不是

this.get('controller.target.router').transitionTo('image', queue, task, image);

用途:

this.get('controller').transitionToRoute('image.index', queue, task, image);

这可能不会改变行为,但它更符合 Ember 的习惯。

第二件事如下:

内部转换不会触发路由上的 model 钩子,因为 Ember 假设您正在传递模型以及转换,因此无需调用 model 钩子,因为您已经传递了模型。

这就是为什么你的断点没有被触发,find 没有被调用(因为它不应该被调用)。

我没有足够的信息来找到您的问题,但如果我从页面刷新有效而内部转换无效这一事实猜测是传递给 transitionTo 的对象之间存在不一致在从 model 钩子返回的内容之间。

您应该将确切的对象传递给transitionTo,作为model 钩子返回的对象。

如果你正在做:

this.get('controller').transitionToRoute('image.index', queue, task, image);

它不起作用,您正在传递的 queuetaskimage 模型可能有问题。

所以这个:

   var task = //assume this value exists;
   var queue = //assume this value exists;
   var image = //assume this value exists;

不是很有帮助,因为它可能是问题所在。

【讨论】:

嗨泰迪。谢谢。你是对的,从模型钩子返回的模型与我传递的模型不同。有没有办法从 ThumbnaiView 获取 ImageRoute 的模型? 你不需要调用实际的 ImageRoute model 钩子,你需要传递相同的模型就像它是从模型钩子返回的。您正在循环 task.images,这不是 App.Image 模型实例的数组(与您从 ImageRoute 模型挂钩返回的相同)吗? 好的,谢谢。现在我想我知道该怎么做了。但是由于我的路由都是动态段,/queue_id/task_id/image_id,这是否意味着我需要通过它们的 id 重新查询队列和任务,然后在 transitionToRoute 方法中传递这些模型?我在想是否有一种无需重新查询即可获得这些模型的方法。就像在任何路线中一样,我可以使用调用 this.modelFor('routeName') 来获取该路线的模型。在我看来这是不可能的。 我试图在这里复制您的应用程序:jsfiddle.net/teddyzeenny/kZqkx 希望它能给您一些关于如何继续的想法。 谢谢泰迪。明天早上我回去工作后,我会先试试这个。

以上是关于Ember JS 过渡到嵌套路由,其中​​所有路由都是视图中的动态段的主要内容,如果未能解决你的问题,请参考以下文章

Ember.js 路由器:如何动画状态转换

Ember.js:从嵌套路由调用 ApplicationRoute 的操作

如何使用 ember.js 访问嵌套索引路由中的父模型?

为啥没有调用我的 ember.js 路由模型?

如何使用异步路由进行 Ember 单元测试?

EmberJS嵌套动态路由不会按预期重定向