0

Given the following router, with a fairly straight forward routing 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. Both routes have a model hook that returns a promise, which is obtained from ic.ajax.

When I navigate to /foos, and then navigate to /foos/123/bar, the following sequence happens:

  • FoosRoute#model make XHR request to GET /api/foos
  • Response returned from /api/foos
  • FooBarRoute#model makes an XHR request to GET /api/foos/123
  • Response returned from /api/foos/123

This is great, and my app works fine. Next I naigate directly to /foos/123/bar, the following sequence happens:

  • FoosRoute#model make XHR request to GET /api/foos
  • FooBarRoute#model makes an XHR request to GET /api/foos/123
  • Response returned from /api/foos/123
  • Response returned from /api/foos

The model hooks for both FoosRoute and FooBarRoute fire in quick succession.

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

How can I do this?


These JsBins provide a concise demonstration of the problem, forked off the demo put together by @kingpin2k:

Using find. Both models load, but child route loads its model before parent route:

Using fetch. Both models load, and child route correctly waits for parent route to load model, but UI doesn't update:

10
  • Something like RSVP.all([promise1,promise2]).then(function(){ /* this runs only when both promises resolved */ }) ? Mar 28, 2014 at 1:03
  • @BenjaminGruenbaum is there a way that I can obtain a reference to the promise of the parent Route's model hook, from the child Route's model hook? If so, this could work.
    – bguiz
    Mar 28, 2014 at 1:08
  • I'm a little confused, this is how Ember is already built, a child route's model hook doesn't fire until the parent route's model is resolved. Are you sure the parent route is returning a promise? Here's an example where the child route depends on the parent's route model, emberjs.jsbin.com/OxIDiVU/333#/colors/1 and the model hook doesn't happen until the parent route's model is resolved.
    – Kingpin2k
    Mar 28, 2014 at 3:17
  • Will you add your model hooks and mention any client side data libraries you might be using
    – Kingpin2k
    Mar 28, 2014 at 3:23
  • @kingpin2k Thanks for the jsbin. Yup - all the routes in my app return promises in their model hooks. I am using ember-model in the model hooks, and within its adapters, I am using ic-ajax (which is the origin of the promises)
    – bguiz
    Mar 28, 2014 at 3:25

1 Answer 1

1

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.

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.