vendredi 9 février 2018

Ember JS and nested routes: the provided route name is invalid

I'm currently working my way through my first Ember JS app, using Balint Erdi's excellent book "Rock and Roll with Ember JS"

This is probably a silly question, but I'm stumped and would appreciate some help.

I have the following (fairly simple) routes for my app:

/clients  
/clients/:slug  
/clients/:slug/requests  

So for example, I would want a user to be able to view the requests for a specific client by visiting /clients/abc-company/requests

On the main dashboard, inside clients.hbs, I have the following code to link to each specific client (using dynamic segments):

  
  <tr>
    <td></td>
    <td>
      
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  

Now, the issue is that Ember doesn't seem to recognize the second link-to parameter (client).

The console is yelling at me with the following error message:

WARNING: This link-to is in an inactive loading state because at least one 
of its parameters presently has a null/undefined value, or the provided 
route name is invalid.

but I DID pass the parameters, which is supposed to be client!

Here are the relevant files in my code, I'm hoping someone can point out my obvious mistake or find the semi-colon that I forgot to include, or something.

//app/router.js
(...)
Router.map(function() {
  this.route('clients', function() {
    this.route('client', { path: ':slug' }, function() {
      this.route('requests');
    });
  });
});

//app/routes/clients.js
(...)
var Client = EmberObject.extend({
  id: '',
  name: '',
  contact: '',
  email: '',
  phone: '',
// create slug from client name
  slug: computed('name', function() {
    return this.get('name').dasherize();
  })
});

// app/routes/clients/client.js <-- see the route DOES exist
(...)
  model: function(params) {
    // get the slug from clients, return client matching the slug name in the URL
    var clients = this.modelFor('clients');
    return clients.findBy('slug', params.slug);
  }
});

// app/routes/clients/client/requests.js
(...)
  model: function() {
    return this.modelFor('clients.client');
  }
});

Any help would be appreciated, this is my first Ember.js hurdle and I have a feeling that understanding nested routes properly will be very useful in the future :)

But for now I'm just confused.

Thanks in advance!

EDIT: Added some more code from the template, for clarity.




Aucun commentaire:

Enregistrer un commentaire