lundi 26 septembre 2016

When a route gets a bad parameter, why do route links with other parameters get an "active" class?

I have an Ember site with a navigation bar that has multiple links to the same route but with different parameters, like this:




When I click on a link, it goes to the right page, and the link gets an active class, as expected.

However, when I enter a URL with a bad parameter for the same route (e.g. /foo/bar), it goes to my error route as expected, but it adds an active class to all foo links. I would expect that none of these foo links would appear active.


I can produce this behaviour with a very simple ember-cli app. All I have to do is run ember new foobar and add/edit a few files as shown below:

/* app/router.js */

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('foo', {path: 'foo/:foo_id'});
});

export default Router;


/* app/routes/foo.js */

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    if (params.foo_id !== '1' && params.foo_id !== '2') {
      throw 'error';
    }
  }
});


/* app/routes/error.js */

import Ember from 'ember';

export default Ember.Route.extend({
});


/* app/templates/application.hbs */




Then, when I run ember s and go to http://localhost:4200/foo/bar in my browser, all the links have the active class.


Is this an Ember bug, or am I doing something wrong, or is this the way Ember is designed to work? In any case, how can I prevent Ember from adding an active class to foo links when the user goes to a bad foo URL?




Aucun commentaire:

Enregistrer un commentaire