EmberJs Async Firing Immediately

0
votes

We have a model that has a number of belongsTo and hasMany relationships set as async: true. The API is passing down IDs only. As soon as the page loads Ember makes request for all of these IDs.

Is this intended behavior? I was under the impression this data would be loaded when called.

How would I go about figuring why these calls are happening?

We are using Ember 1.13.9 and Ember-data 1.13.11

Edit: Turns out we had something extending our model that was hitting all of these async relationships.

1
ember.jsember-data
@torazaburo's answer is quite thorough, but if you find it insufficient you will have to give up more details about your app, for example how in the templates you're using the relationships. – locks

1 Answers

2
votes

I was under the impression this data would be loaded when called.

What do you mean by "called"?

It would be more correct to say "loaded when needed".

Consider the following:

// parent-model
children: hasMany('children', { async: true })

// parent-controller
displayChildren: false

// child-model
name: attr()

// template
{{#if displayChildren}}
  {{#each model.children as |child|}}
    {{child.name}}
  {{/each}}
{{/if}}

Since displayChildren is false, the loop in the template will not be executed. Hence the children are not needed. Hence they will not be retrieved. When displayChildren is set to true, the children become needed by the template, and will be retrieved. If the initial value of displayChildren is true, the children will be retrieved instantly upon rendering.

There is one other situation in which the records referred to by the async relationship will be loaded: when get is called for them (which is sort of what happens under the covers when the template tries to get them). This get will return a promise for the actual value. So if for some reason you need or want to access the children from program logic, you write something like this:

// parent-controller
someFunc() {
  this.get('model.children') . then(children => /* do something with children */)
}