javascript - Ember JS 过渡到嵌套路由，其中​​所有路由都是 View 中的动态段

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}}

这里是缩略图 View 的代码:

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() 的调用似乎有效。我可以看到，当我单击其中一个缩略图 View 时，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 Hook ，因为 Ember 假设您将模型与转换一起传递，因此无需调用 model Hook 因为您已经通过了模型。

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

我没有足够的信息来找到您的问题，但是如果我根据页面刷新有效而内部转换无效的事实进行猜测，那是因为传递给 transitionTo 的对象之间存在不一致 和从 model Hook 返回的内容之间。

您应该将确切的对象传递给 transitionTo，作为那些将由 model Hook 返回的对象。

如果你正在做:

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;

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