Note that there are some explanatory texts on larger screens.

plurals
  1. PONested routes: handling failed child find in error action loses parent context
    primarykey
    data
    text
    <p>I've recently been porting a number of Ember apps I maintain to RC 8 and ran into this.</p> <p>Before the router facelift landed I would sometimes manage control flow via promises returned by Ember Data <code>find</code> calls.</p> <p>For example:</p> <pre><code>SomeRoute = Ember.Route.extend({ model: function(params) { var resolve = function(model) { return model; }; var route = this; var reject = function() { this.transitionTo('someOtherRoute'); }; return SomeModel.find(params.some_model_id).then(resolve, reject); } ... }); </code></pre> <p>With the recent changes, it is now possible to handle errors created in model callbacks via the <code>error</code> action:</p> <pre><code>SomeRoute = Ember.Route.extend({ // note: model callback no longer needed--default suffices actions: { error: function(reason, transition) { // check the reason object to determine how/if to handle this error this.transitionTo('someOtherRoute'); } } ... }); </code></pre> <p>I much prefer the latter approach as it makes the code easier to read and better separates concerns.</p> <p>This works well in most cases but I encountered an issue in an app that uses nested routes. I've included a simplified example followed by a jsbin that demonstrates the issue.</p> <p>Lets say we want to show <code>Article</code>s that belong to <code>Author</code>s and the URLs look like: <code>/authors/:author_slug/articles/:article_slug</code>. We want to redirect to a Not Found page when someone tries to view an article that doesn't exist.</p> <p>When managing control flow in the <code>model</code> callback as above, you can browse to <code>/authors/some_author/articles/some_invalid_slug</code> and be redirected to <code>/authors/some_author/articles/not_found</code> as expected.</p> <p>However, if the redirect to the Not Found page is instead managed via the <code>error</code> action, the parent context is lost at some point and you end up at <code>/authors/undefined/articles/not_found</code>.</p> <p>You can see this in the following jsbins:</p> <p><a href="http://jsbin.com/eJOXifo/1#/authors/schneier/articles/12345" rel="nofollow">http://jsbin.com/eJOXifo/1#/authors/schneier/articles/12345</a> (redirects to <a href="http://jsbin.com/eJOXifo/1#/authors/schneier/articles/not_found" rel="nofollow">http://jsbin.com/eJOXifo/1#/authors/schneier/articles/not_found</a>)</p> <p><a href="http://jsbin.com/oNaWelo/1#/authors/schneier/articles/12345" rel="nofollow">http://jsbin.com/oNaWelo/1#/authors/schneier/articles/12345</a> (redirects to <a href="http://jsbin.com/oNaWelo/1#/authors/undefined/articles/not_found" rel="nofollow">http://jsbin.com/oNaWelo/1#/authors/undefined/articles/not_found</a>)</p> <p>Does anyone know why this happens or how to avoid it?</p> <p>Notes:</p> <ul> <li>I know this doesn't have anything to do with Ember Data. However, implementing something equivalent without Ember Data just makes the example more complicated without adding anything</li> <li>There are a few small hacks to make Ember Data work as expected in jsbin: <ul> <li>I'm preloading the parent model to avoid having to load it from anywhere.</li> <li>I'm not doing anything special to provide data for the child model. The app just makes a request to <code>http://jsbin.com/articles/12345</code>. This actually returns a 200 but bombs anyway because the response is html. An API that correctly returns a 404 response gives the same behvaiour.</li> <li>I remember a while ago reading about some service that could be used to build fake API responses for use with services like jsfiddle or jsbin. If anyone knows what it is please comment.</li> </ul></li> </ul>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload