Ember 2.0 component request for data

Question

I am trying to create an organisations-table component, which will display a list of organisations, and the user for which each organisation belongs. I pass the model for the organisations into the component via an organisations.hbs template, which results in the following response from the server:

{    
  "organisations": [
    {
      "id": 0,
      "name": "Org0",
      "user": 1
    },
    {
      "id": 1,
      "name": "Org1",
      "user": 2
    },
    {
      "id": 2,
      "name": "Org2",
      "user": 2
    }
  ]
}

In order to display the username for each user, the component then makes its own call to the server querying against the id for each of the users.

Is this the correct approach? My understanding is that components are supposed to be isolated by design, only aware of the data passed into them, but in this example, the component is sending its own requests to the server for the additional data.

I have created this ember twiddle to hopefully give an idea of the structure of the app (comments welcome!).

Thanks in advance

Patsy Issa Patsy Issa · Accepted Answer · 2015-09-01T14:24:01

The component itself has nothing to do with the calls, { async: true } means that the relationship won't be fetched unless it is "needed".

Needed in this case being the organisation.user.username in your component's template.

Keep in mind that model in your case is an array of DS.Model objects that have relationships.

Ember 2.0 component request for data

1 Answers