烬JS过渡到嵌套路线，其中所有航线从视图动态细分(Ember JS transition to ne

我们正在编写使用EmberJS的应用程序。 但是我们仍然新本框架，我们有一个很难解决一些什么似乎是直线前进。

该模型是非常简单的，有3种型号：队列，任务和图像。 我们使用动态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);

这可能不会改变的行为，但它更灰烬地道。

第二件事是以下几点：

内部转换不会触发model的路线挂机，因为灰烬假定您传递模型与过渡一起，因此无需调用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;

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

文章来源: Ember JS transition to nested routes where all routes are dynamic segments from a view