Quantcast
Channel: Ember.JS - Latest topics
Viewing all articles
Browse latest Browse all 4836

Multiple dynamic segments without nesting

$
0
0

@hmblcodr wrote:

The Problem

I want to have a route with two dynamic segments that represent two related models. When I use link-to to generate a link to the route, I get the following error:

Error: More context objects were passed than there are dynamic segments for the route: list

What I've tried

nested routes

This works but it's nested, which means that the list template is rendered in the {{outlet}} of the parent (user) template. I don't want this.

messing around with model hooks and serialize

I got the list route model() hook to return a hash containing the user and list, and serialize to return an object with the correct values for each dynamic segment, but the same error appeared.

Pass only one object in link-to

Passing only one object (the list) removed the error but resulted in the URL being wrong:

http://localhost:4200/undefined/list-1

Code

The routes are defined as follows:

Router.map(function() {
  this.route('user', { path: ':username' });
  this.route('list', { path: ':username/:slug' });
});

slug is the list slug, a field in the list model.

The user route displays all the lists a user has, where each one links to the list page using the following code in the template:

{{#each model.lists as |list|}}
  {{#link-to "list" model list class='list-group-item'}}
{{/each}}

model is the user returned by the user route's model() hook:

model(params) {
  return this.store.queryRecord('user', {
      username: params.username
  });
}

The list route model() hook returns the list identified by the slug:

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.store.queryRecord('list', {
      slug: params.slug,
    });
  }
});

The user model is shown below:

import DS from 'ember-data';

export default DS.Model.extend({
  username: DS.attr(),
  lists: DS.hasMany('list', { async: true }),
});

And finally, the list model:

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr(),
  slug: DS.attr(),
  user: DS.belongsTo('user'),
});

Posts: 1

Participants: 1

Read full topic


Viewing all articles
Browse latest Browse all 4836

Trending Articles