Relationships in Ember

Design
1

Hello all,

I’m stuck trying to implement this. I have a route that loads three models A, B and C. Here each model has an array of instances. Model B has a belongs-to relationship to one instance of model A while model C has a belongs-to relationship to one of model B. I am trying to make a component that has a property each for an instance of model A, B and C and C can be null because not all model B instances have a corresponding model C. So far I have been able to to use an each helper that runs through model A and within that helper another one that runs through model B and displays something only if model B matches with the current model A, however I’m stuck on how to do this with model C…

Any idea for a solution will be really appreciated, thanks!

2

I’m struggling a little bit to follow your description I think, mostly because it’s hard for me to visualize. Any code (models, templates so far) or visual examples of what you’re trying to get to would be helpful.

3

Ok what I was trying to say was…

I have a products model and a subscriptions model.

On a template I want to show a list of all the available products and under each product I want to show whether the logged in user is subscribed to it or not. In my products model definition, I have no reference to the relationship between it and the subscriptions model because the subscription model already has its relationship to the product model defined as a one to one relationship. The subscriptions model also has a one to one relationship with the users model.

How do I display the products and subscriptions in this way?

So far this is what I have For each product a corresponding component is created and given all the subscriptions.

products-list.hbs

{{#each products as |product|}}
     {{product-unit user=user subscriptions=subscriptions}}
{{/each}}

in each component I use another component to run through each subscription and take out a match by sending an action that checks for equality between the product id and the id of the product related to the subscription. When a match is found it sets the correct subscription and sets other properties of the product view that is related to it.

template/component/product-unit.hbs

{{#each subscriptions as |subscription|}}
    {{subscription-belongs subscription=subscription product=product setSubscription=(action "setSubscription") updateProperties=(action "updateProperties")}}
{{/each}}

component/subscription-belongs.js

import Component from '@ember/component';
export default Component.extend({
	belongs: Ember.computed( function() {
		if (this.get('subscription.product.id') == this.get('product.id')){
			return true
		}else{
			return false
		}
	}),
	didReceiveAttrs(){
		if(this.get('belongs')== true){
			this.sendAction('setSubscription', this.get('subscription'))
		}
		this.sendAction('updateProperties')
	}
});

I feel there is a much better way to implement this and will really appreciate any help. Thanks.