Ember JS转换到嵌套路由，其中所有路由都是视图的动态段 [英] Ember JS transition to nested routes where all routes are dynamic segments from a view
问题描述
模型很简单，有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.Thumbn ailView = Ember.View.extend（{
tagName：'a'，
click：function（e）{
var task = //假定此值存在;
var queue = //假定此值存在;
var image = //假定此值存在;
this.get（'controller.target.router'）。transitionTo（'image'，queue，task，image）;
}
}）;
最后，这是我们的ImageRoute：
App.Image = Ember.Object.extend（）;
App.Image.reopenClass（{
find：function（image_id）{
//这是我设置断点的地方
console.log（image_id）;
}
}）;
App.ImageRoute = Ember.Route.extend（{
model：function（params）{
// image_id是最后一个uri段：＃/ 1/1 / 1
return App.Image.find（params.image_id）;
}
}）;
问题：
调用$ code> this.get（'controller.target.router'）。transitionTo（）似乎正在工作。我可以看到，当我点击其中一个缩略图视图时，网址会更改（例如/ 1/1/2到/ 1/1/3）。但是，我没有在UI中看到任何状态更改。此外，我放置断点的行似乎没有被触发。但是当我刷新页面时，它的效果很好。
我的转换代码有问题吗？
谢谢。
需要注意的两件事：
首先，而不是
this.get（'controller.target.router'）。transitionTo（'image'，queue，task，image）;
使用：
code> this.get（'controller'）。transitionToRoute（'image.index'，queue，task，image）;
这可能不会改变行为，但更多的是Ember惯用语。
第二件事如下：
内部转换不会触发模型钩子在路由上，因为Ember假设您正在转换模型，所以没有必要调用模型钩子，因为您已经通过模型。
这就是为什么你的断点不被触发， find 没有被调用（因为它不应该） / p>
我没有足够的信息来找到你的问题，但如果我猜测页面刷新工作，内部转换不是有传递给 transitionTo 的对象与模型钩子之间返回的对象之间的不一致。
您应该将确切的对象传递给 transitionTo ，这些对象将被
如果你在做：
this.get（'controller'）。transitionToRoute（'image.index'，queue，task，image）;
并且它不起作用，或者 queue ，任务或 image 您正在传递的模型。
所以这样：
var task = //假定此值存在;
var queue = //假定此值存在;
var image = //假定此值存在;
不是很有帮助，因为它可能是问题所在。
We are writing an application using EmberJS. However we are still new with this framework and we're having a hard time resolving some of what may seem to be straight forward.
The model is pretty simple, there are 3 models: Queue, Task, and Image. We are using dynamic URI segments for all routes and routes for these models are nested in the form: :queue_id/:task_id/:image_id.
The routes are configured this way:
App.Router.map(function() {
this.resource('queue', {path: ':queue_id'}, function() {
this.resource('task', {path: ':task_id'}, function() {
this.resource('image', {path: ':image_id'});
});
});
}
And somewhere in the HTML, we have this simple template to iterate through all images from a task:
{{#each task.images}}
<li>
{{#view App.ThumbnailView.contentBinding="this"}}
<img {{bindAttr src="thumbnail.url"}} />
{{/view}}
</li>
{{/each}}
And here is the code for the Thumbnail 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);
}
});
Finally, here's is our 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);
}
});
The Problem:
The call to this.get('controller.target.router').transitionTo() seems to be working. I can see that when I click in one of the thumbnails view, the URL changes (e.g from /1/1/2 to something like /1/1/3). However, I'm not seeing any state change in the UI. Also, the line where I put a breakpoint doesn't seem to be triggered. But when I refresh the page, it works well.
Is there something wrong with my transition code?
Thanks.
Two things to note:
First, instead of
this.get('controller.target.router').transitionTo('image', queue, task, image);
Use:
this.get('controller').transitionToRoute('image.index', queue, task, image);
This might not change the behaviour, but it's more Ember idiomatic.
The second thing is the following:
Internal transitions will not trigger the model hook on the route, because Ember assumes you are passing the model along with the transition, so no need to call the model hook since you already passed the model.
That is why your breakpoint doesn't get triggered, the find isn't being called (as it shouldn't).
I don't have enough information to find your issue but if I were to guess from the fact that a page refresh works and an internal transition doesn't is that there is an inconsistency between the objects passed to transitionTo and between what is returned from the model hook.
You should pass the exact object to transitionTo as the ones that would have been returned by themodel hook.
If you are doing:
this.get('controller').transitionToRoute('image.index', queue, task, image);
and it's not working, something is probably wrong with either queue, task, or image models you are passing.
So this:
var task = //assume this value exists;
var queue = //assume this value exists;
var image = //assume this value exists;
is not very helpful because it could be where the problem is.
这篇关于Ember JS转换到嵌套路由，其中所有路由都是视图的动态段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
