[英]Make child Route fire model hook only after the promise returned by parent Route has resolved in EmberJs?
Given the following router, with a fairly straight forward routing synatx: 给定以下路由器,并具有相当简单的路由synatx:
App.Router.map(function () {
this.resource('foos', function(){
this.resource('foo', { path: '/:foo_id' }, function(){
this.route('bar');
});
});
});
I have FoosController
, and FooBarController
, with corresponding routes for each: FoosRoute
and FooBarRoute
. 我有FoosController
和FooBarController
,每个都有相应的路由: FoosRoute
和FooBarRoute
。 Both routes have a model
hook that returns a promise, which is obtained from ic.ajax
. 两种路由都有一个model
钩子,该钩子返回从ic.ajax
获得的ic.ajax
。
When I navigate to /foos
, and then navigate to /foos/123/bar
, the following sequence happens: 当我导航到/foos
,然后导航到/foos/123/bar
,将发生以下顺序:
FoosRoute#model
make XHR request to GET /api/foos
FoosRoute#model
向GET /api/foos
发出XHR请求 /api/foos
从/api/foos
返回的响应 FooBarRoute#model
makes an XHR request to GET /api/foos/123
FooBarRoute#model
向GET /api/foos/123
发出XHR请求 /api/foos/123
从/api/foos/123
返回的响应 This is great, and my app works fine. 太好了,我的应用程序运行正常。 Next I naigate directly to /foos/123/bar
, the following sequence happens: 接下来,我直接定位到/foos/123/bar
,发生以下顺序:
FoosRoute#model
make XHR request to GET /api/foos
FoosRoute#model
向GET /api/foos
发出XHR请求 FooBarRoute#model
makes an XHR request to GET /api/foos/123
FooBarRoute#model
向GET /api/foos/123
发出XHR请求 /api/foos/123
从/api/foos/123
返回的响应 /api/foos
从/api/foos
返回的响应 The model
hooks for both FoosRoute
and FooBarRoute
fire in quick succession. 快速连续触发FoosRoute
和FooBarRoute
的model
挂钩。
The server takes a longer time to return the response from /api/foos
than it does for /api/foos/123
, and so they arrive out of order. 与/api/foos/123
,服务器从/api/foos
返回响应的时间更长,因此它们到达的顺序不正确。 This puts my app into an incorrect state, and I would like to fix this, by ensuring that the model
hook for FooBarRoute
is fired only after the promise returned by the model
hook for FoosRoute
has resolved. 这使我的应用程序到一个不正确的状态,我想解决这个问题,通过确保model
的钩FooBarRoute
被激发由返回的承诺后,才model
为钩FoosRoute
已经解决。
How can I do this? 我怎样才能做到这一点?
These JsBins provide a concise demonstration of the problem, forked off the demo put together by @kingpin2k: 这些JsBins通过@ kingpin2k组成的演示提供了该问题的简要演示:
Using find
. 使用find
。 Both models load, but child route loads its model before parent route: 两种模型都会加载,但是子路径会在父路径之前加载其模型:
Using fetch
. 使用fetch
。 Both models load, and child route correctly waits for parent route to load model, but UI doesn't update: 两个模型都加载,并且子路由正确等待父路由加载模型,但是UI不会更新:
You need to use fetch
as we already discussed, and in your custom find
overload you need to return the record, not the results of record.load
which is undefined. 您需要使用fetch
正如我们已经讨论过,并在您的自定义find
你需要返回的记录,而不是结果超载record.load
这是不确定的。
return App.AppModel.fetch(1);
App.AppModel.adapter = Ember.Adapter.create({
find: function(record, id) {
//instead of jQuery.ajax, use ic.ajax as suggested by stefanpenner
//See: https://github.com/emberjs/ember.js/issues/4442#issuecomment-36207354
var req = ic.ajax.raw({
type: 'GET',
url: App.apiUrl+'/appmodels/'+id,
contentType: 'application/json',
dataType: 'json',
processData: false
});
return req.then(function resolve(result) {
console.log('AppModel adapter find resolve', result.response);
record.load(id, result.response);
return record;
});
}
});
http://jsbin.com/cukuciva/1/edit http://jsbin.com/cukuciva/1/edit
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.