我们正在使用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}}
这里是Thumbnail视图的代码：
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()似乎正在工作.我可以看到,当我点击其中一个缩略图视图时,网址会更改(例如/ 1/1/2到/ 1/1/3).但是,我没有在UI中看到任何状态更改.此外,我放置断点的行似乎没有被触发.但是当我刷新页面时,它的效果很好.
我的转换代码有问题吗？
谢谢.
解决方法
两件事要注意：
首先,而不是
this.get('controller.target.router').transitionTo('image',image);
使用：
this.get('controller').transitionToRoute('image.index',image);
这可能不会改变行为,但更多的是Ember惯用语.
第二件事是：
内部转换不会触发路由上的模型钩子,因为Ember假定您正在将模型与转换一起传递,因此,您已经通过了模型,因此无需调用模型钩子.
这就是为什么你的断点不被触发,发现没有被调用(因为它不应该).
我没有足够的信息来找到你的问题,但是如果我从一个页面刷新工作和内部转换的事实中猜出,传递给transitionTo的对象与传递给transitionTo的对象之间有什么不一致模型钩.
你应该将确切的对象传递给transitionTo,这些对象将被该模型钩子返回.
如果你在做：
this.get('controller').transitionToRoute('image.index',image);
并且它不起作用,您正在传递的队列,任务或图像模型可能是错误的.
所以这：
var task = //assume this value exists; var queue = //assume this value exists; var image = //assume this value exists;
不是很有帮助,因为它可能是问题所在.