In my category template I can view the related products eg
{{#each model.data.products as |item|}}
{{item.name}}
{{/each}}
What I want to do is obtain the data within a child route for using within a component.
In my child route (item), I can grab the model for the parent route (items) which gives me the product categories (and I assume also) the related products for each of those categories…
model(params) {
let model = this.modelFor('product.items')
}
However, I’m struggling to obtain the data so I can pass it to a component within the model hook… I thought I could do something like model.data.get(‘products’) but that’s not correct.
I can access within a template no problem - I need access to the related item data within the model hook so I can pass that data to a component - sorry if that wasn’t clear.
Assuming the route for the category page is product.items - I have that route backed by the the category model, which has access to the related items (products).
When I get to the product detail route eg product.items.item I have access to the item itself no problem, but I also want access to other related items in the category you are viewing. I need that in the model/component and I can’t seem to access that data… The data is being passed down to the child route but I don’t know how to access it this way (rather than via a template)
The reason I wasn’t getting the expected results was that the app was refreshing on the product detail route (product.items.item) each time and when that happens, the length of the products array is always zero.
If I arrive at the same child route without an app refresh, I do get the expected results. Now just got to try and find out why this is happening! I can still access the category name as shown above when the app refreshes on the child route…
I had a similar issue with my code. It turned out that sometimes get('blah') was returning a promise because the data I was trying to get was not already loaded. Try treating your get like a promise and see if that helps.
Alternately, you could try side-loading the products data when you get your category/categories. This may alleviate the need for Ember to asynchronously go get the data since it’s already in your app’s data store.
This is also why your template works but not your route. The templates know how to deal with the promise, while your route is treating it like a synchronous call and thus has nothing at the time of execution.
Having some (no doubt basic!) problems in treating the get like a promise in my component …I’m not able to return anything sensible from the promise (apart from length) and to use that
I want to do something like
let relatedItems = mainModel.data.get('products').then(answer => {
// how to return my objects from this ?
},reject => {
console.log('errr');
});
The mainModel here is obtained by the modelFor hook in the product.items.item route.
I’m sure it’s basic, but it’s not playing well for me I’m afraid ! Can you give some guidance?
Thanks for getting back - this is the code I would use. However, aside from getting the length of the relatedItems array, I’m struggling to get anything meaningful. When I get some time, I’ll provide some more info.
Even if I create a simple object like this where model is the category model
export default Ember.Component.extend({
pagination:null,
testing:null,
willRender() {
let page = {};
model.data.get('products').then(relatedItems => {
page.name = 'hello world';
this.set('pagination',page);
this.set('testing','this is a test');
console.log(this.get('pagination')); // prints object ok
console.log(this.get('testing')); // prints this is a test
},reject => {
//as before
});
}
});
In my template if print out {{testing}} I get the correct result
However, if I try and use pagination eg {{log pagination}} the browser crashes, and in the console I just get the object printed in a loop.
Do you know why this is happening? Many thanks in advance!