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

Question

我们正在使用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中的状态发生任何变化.此外,我放置断点的行似乎没有被触发.但是当我刷新页面时,它运行良好.

我的转换代码有问题吗？

谢谢.

Answer 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);

和它不工作,那么可能是有两种queue,task或image模型要传递.

所以这:

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

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