0

In my app I have the following setup:

Router

this.resource('types');
this.resource('type', {path: 'types/:type_id'})

When a user navigates to types he gets a list with all the different types. When he clicks on a link he navigates to the specific type:page. Here I would like to show an array of products. Each type has an array of products. I tried to get the products doing so:

this.resource('types');
this.resource('type', {path: 'types/:type_id'}, function(){
    this.resource('products', {path: '/products'});
});

Router

model: function(){
    return this.store.find('product');
}

but that didn't work. I also tried with the params but that doesn't work.

model: function(params){
    return this.store.find('product', {id: params_id});
}

Templates

Type-template

  <h3>{{name}}</h3>
  <hr>
  {{outlet}}

Product-template

  {{#each}}
       {{name}}
  {{/each}}

But nothing gets loaded in the template. I don't know if this is the way to go. I had some success with removing the nested route and simply loading the two models in the afterModel hook on the typeController, but that doesn't give me access to some other models, linked to the product.

It's very frustrating that some "easy" things, like loading an array of products that belong to a type, is such a hassle.

Edit What I try to achief is that when you visit the homepage you can

  1. click a link "types" that takes you to the url ..../types and shows you a list of all the types. No problem there.
  2. When you click on a type it takes you to types/type_id (e.g. types/1) and show you some info about the specific type (that works too).
  3. On that same page I want to show a list of all the products associated with this type. Here is where I'm struggling

Models type

name: DS.attr('string'),
products: DS.hasMany('product', {async: true})

product

name: DS.attr('string'),
prodcuts: DS.belongsTo('type', {async: true})

I tried this first by passing two models on the same route as suggested in this question. That works fine to some extend, but I want to put an action and computed property on each of the products and because the models are loaded in the afterModel hook, they don't get updated. I thought the way to go was to input a nested resource that returns me all of the products based on the type_id but I can't get that to work somehow.

Community
  • 1
  • 1
Jan_dh
  • 771
  • 6
  • 14
  • 1
    Could you please provide the jsbin? – Susai Dec 31 '14 at 14:35
  • it is not really clear what you are trying to accomplish here? you are saying that when you click the link from a collection of types... then each `type` has-many `product` associated with it? do you have your models set up that way? can you show that? and in your `type` route you want to use `...find('type', params.type_id)` to set up the "single type" route.. the products (if defined correctly) should load up with it. – Grapho Dec 31 '14 at 15:26
  • Jsbin is hard because you need to work with fixture-data etc. and it doesn't really work the same way as with a http-mock server (promises etc.) – Jan_dh Jan 01 '15 at 12:52

0 Answers0